Div's content not being contained and is overlapping (Bootstrap, Css, MVC) - html

Question

I Currently am designing a login page in mvc and I want to seperate certain elements so they can be styled correctly. However when I create div's inside other divs they do not stick to the outer div's height and therefore move all around the page. I will give you a sample with my code.
In my Layout.cshtml page I've got
<div class="login-box-outer">
<div class="container">
<div class="login-box">
<div class="login-logo">
<a href="example" </b> Example</a>
</div>
#RenderBody()
</div>
</div>
</div>
In my register page I have the following
.form-control{
height: 35px;
}
.login-logo{
display: none;
}
.login-box, .register-box {
width: 500px;
margin: 2% auto;
}
.text-danger {
color: #a94442;
}
.login-page, .register-page {
background: url('https://example.jpg');
background-position: center;
background-size: cover;
}
##media(max-width: 400px)
{
.login-box, .register-box {
width: 300px;
margin: 4% auto;
}
}
.intl-tel-input{
display: block !important;
}
.join-section__shadow {
left:10%;
bottom:35%;
position: absolute;
padding: 96px 0 48px;
}
.join-content-layout {
background-color: transparent;
padding: 0;
max-width: 1110px;
margin: 0 auto;
position: relative;
color:white;
}
.join-xlarge {
font-size: 38px;
line-height: 44px;
font-weight: 800;
text-shadow: 0 0 3px rgba(0,0,0,.3);
}
.join-medium {
font-size: 24px;
margin-top: 10px;
font-weight: 500;
text-shadow: 0 0 1px rgba(0,0,0,.5);
}
.content-frame.purple2-bg {
background: #fff;
}
.container-fluid.support-block {
padding-top: 30px;
padding-bottom: 30px;
}
.support-block a {
text-decoration: none;
}
</style>
still in the register page here is my html
<div class="container-fluid support-block">
<div class="join-section__shadow">
<div class="join-content-layout">
<div class="col-md-12 col-sm-12">
<h1 class="join-xlarge join-headline join-h1">
Example
</h1>
<h3 class="join-medium join-h3">
Example
</h3>
</div>
</div>
</div>
<div class="col-xs-10 col-xs-push-10 noPadding" style="bottom:100px;">
<form asp-controller="Account" asp-action="Register" asp-route-returnurl="#ViewBag.ReturnUrl" method="post" role="form">
#Html.AntiForgeryToken()
<div class="box box-primary col-xs-12 boxShadow" style="border:none;margin-bottom:10px;">
<div class="form-group has-feedback col-xs-12 noPadding">
<label>Name</label>
<input asp-for="#Model.FullName" value="#Model.FullName" class="form-control" />
<span asp-validation-for="#Model.FullName" class="text-danger"></span>
</div>
</form>
</div>
</div>
<div class="container-fluid">
<div class="content-frame purple2-bg">
<div class="container-fluid support-block">
<div class="row icon-row">
<div class="col-md-4">
<i class="fa fa-tag" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
<div class="col-md-4">
<i class="fa fa-thumbs-up" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
<div class="col-md-4">
<i class="fa fa-money" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
</div>
</div>
</div>
</div>
However, under the form I want a complete new section but the content from the form and everything else seems to just float about on the page! Anybody know why this is happening?
Here is how it looks in the browser
This container should be taking up the full width of the screen but it's just floating around. Any idea as to why this is happening?