Bootstrap not fitting individual classes - html

Question

image
So My text goes around the left and my form on the right. This is exactly what I want but everything is out of my jumbotron.
I have listed my HTML and CSS code below. Please review it .
<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?Login </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;
}
~Thanks in advance

Answer 1

Is this you want ??
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;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class = "jumbotron clearfix">
<div class="container">
<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?Login </p>
</div>
</div>
</div>