My content is aligned with the text on the left and the form on the right, which is exactly what I intended. However, everything seems to be outside of my jumbotron container.
Below is my HTML and CSS code. Your feedback is greatly appreciated.
<div class = "jumbotron">
<div class = "cmpnt"><h1 style="font-family: 'Pacifico';"class="logo" > Mesmere</h1><h5> A safe social network <br>for <b>Everyone.</b><br>Build your Online presence <br>from the ground up.<br></h5></div>
<div class="cmpnt" >
<h3>Sign Up</h3>
<form id = "signup" action="/signAction" method="POST" >
<input type='hidden' name='csrfmiddlewaretoken' value='yr9j1vpQzJsfZXriKQLpU6GjqkdDZpSQeDlbwp5ENBaSLKZZDOrDq25iONXVjfXf' />
<div id="div_id_username" class="control-group"> <label for="id_username" class="control-label requiredField">
Username<span class="asteriskField">*</span> </label> <div class="controls"> <input type="text" name="username" placeholder="Make it Creative" class="textinput textInput" required id="id_username" /> </div> </div> <div id="div_id_password" class="control-group"> <label for="id_password" class="control-label requiredField">
Password<span class="asteriskField">*</span> </label> <div class="controls"> <input type="password" name="password" placeholder="We won't sell it" class="textinput textInput" required id="id_password" /> </div> </div> <div id="div_id_email" class="control-group"> <label for="id_email" class="control-label requiredField">
Email Id<span class="asteriskField">*</span> </label> <div class="controls"> <input type="email" name="email" class="emailinput" required id="id_email" /> </div> </div>
<br>
<input type="submit" class="btn btn-info" value="Submit">
</form>
<p>Already have an account?<a href="login">Login</a> </p>
</div>
</div>
CSS-
html,body{
overflow-x:hidden;
width:100%;
height: 100%;
font-family: "Open Sans"
}
.jumbotron{
background-color:#23103a;
color:#FF6C00;
}
.cmpnt{
float:left;
}
.btn{
background-color: #a0204c;
border-color:#a0204c;
}
~Looking forward to your input