Why is my body not adjusting to the content in the webpage - html

Question

While trying to content for a page while using an overlay grid, the content that im trying to place in exceeds the body boundaries? I'm trying to fix it, but i have no idea how? ive tried making a body reference in css as well as adjust the height, but no progress. Here is my code.
header {
height: 900px;
background-image: url('../img/large-banner-image.png');
background-repeat: no-repeat;
background-position: center top;
}
span {
font: 60px Pacifico, sans-serif;
font-weight: 400;
}
.Header-Type {
vertical-align: -16px
}
img {
display: inline-block;
margin: 17px;
}
h1 {
text-align: center;
position: relative;
top: 62px;
right: 13px;
}
h2 {
font: 22px Raleway, sans-serif;
font-weight: 700;
}
p {
font: 36px Raleway, sans-serif;
font-weight: 300;
text-align: center;
position: relative;
top: 90px;
}
.grey {
text-align: center;
position: relative;
height: 427px;
width: 1600px;
background-color: #e3e3e3;
bottom: -250px;
z-index: -1
}
.Phone {
float: right;
position: relative;
display: inline-block;
top: -567px;
right: 33.5%;
border-style: solid;
}
.Down-Arrow {
text-align: center;
position: relative;
top: -574px;
}
.white-button1 {
float: right;
display: inline-block;
position: absolute;
right: 53%;
bottom: -260px;
border-style: solid;
z-index: 1;
}
.white-button2 {
float: right;
display: inline-block;
position: absolute;
right: 53%;
bottom: -60px;
border-style: solid;
z-index: 1;
}
.white-button3 {
float: right;
display: inline-block;
position: absolute;
right: 44%;
bottom: 19px;
border-style: solid;
}
.black-button {
float: right;
display: inline-block;
position: absolute;
right: 43.4%;
bottom: -170px;
border-style: solid;
}
.cursor {
float: right;
display: inline-block;
position: absolute;
right: 43.4%;
bottom: -172px;
border-style: solid;
}
.angle {
float: right;
display: inline-block;
position: absolute;
right: 35.8%;
bottom: -267px;
border-style: solid;
}
.cursor {
float: right;
display: inline-block;
position: absolute;
right: 43.4%;
bottom: -174px;
border-style: solid;
z-index: 1;
}
.content-alt {
float: left;
margin-left: 100px;
margin-left: 5%;
position: absolute;
top: 750px;
left: 170px;
width: 20%;
}
.content-alt2 {
float: left;
margin-left: 100px;
margin-left: 5%;
position: absolute;
top: 918px;
left: 170px;
width: 20%;
}
.content {
float: right;
margin-right: 100px;
margin-right: 5%;
position: absolute;
top: 750px;
right: 165px;
width: 20%;
}
.content2 {
float: right;
margin-right: 100px;
margin-right: 5%;
position: absolute;
top: 918px;
right: 165px;
width: 20%;
}
.alternate {
float: left;
margin-left: 100px;
margin-left: 5%;
position: absolute;
left: 110px;
width: 36%;
}
.other {
display: none;
text-align: center;
}
.near-bottom {
display: none;
text-align: center;
}
footer {
word-spacing: 30px;
}
.text {
font: 16px HelveticaNeue, sans-serif;
line-height: 1.6;
font-weight: 400;
}
.footer {
display: none;
font: 16px HelveticaNeue, sans-serif;
font-weight: 400;
}
.Image {
display: none;
text-align: center;
}
<header>
<h1> <img style="vertical-align:middle" src="img/focus.png" /><span class="Header-Type">Focus</span></h1>
<p>A landing page for your app with focus</p>
</header>
<div class="Down-Arrow">
<img src="img/down-arrow.png" />
</div>
<div id="white">
<div class="Phone">
<img src="img/iphone.png" />
</div>
<div class="white-button1">
<img src="img/white-dot.png" />
</div>
<div class="white-button2">
<img src="img/white-dot.png" />
</div>
<div class="white-button3">
<img src="img/white-dot.png" />
</div>
</div>
<div class="black-button">
<img src="img/Black-dot.png" />
</div>
<div class="cursor">
<img src="img/cursor.png" />
</div>
<div class="angle">
<img src="img/angled-line.png" />
</div>
<div class="grey"></div>
<div id="text-content">
<div class="content-alt">
<h2>Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
<div class="content">
<h2>Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
<div class="content-alt2">
<h2>Another Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
<div class="content2">
<h2>Another Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
</div>
<div class="alternate">
<h2>Get The App Today!</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id sollicitudin
ante lobortis at.</div>
</div>
<div class="other">
<h3>“Focus is an app that is extremely useful. I would reccomend it to anyone.”</h3>
<div>Kyle Turner, Blogger</div>
</div>
<div class="Image">
<img src="img/people.png" />
</div>
<div class="near-bottom">
<h4>Say Hi & Get in Touch</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</div>
</div>
<footer>
<p class="footer">Contact Download Press Email Support</p>
</footer>

Answer 1

Change the .grey width to 100%.
header {
height: 900px;
background-image: url('../img/large-banner-image.png');
background-repeat: no-repeat;
background-position: center top;
}
span {
font: 60px Pacifico, sans-serif;
font-weight: 400;
}
.Header-Type {
vertical-align: -16px
}
img {
display: inline-block;
margin: 17px;
}
h1 {
text-align: center;
position: relative;
top: 62px;
right: 13px;
}
h2 {
font: 22px Raleway, sans-serif;
font-weight: 700;
}
p {
font: 36px Raleway, sans-serif;
font-weight: 300;
text-align: center;
position: relative;
top: 90px;
}
.grey {
text-align: center;
position: relative;
height: 427px;
width: 100%;
background-color: #e3e3e3;
bottom: -250px;
z-index: -1
}
.Phone {
float: right;
position: relative;
display: inline-block;
top: -567px;
right: 33.5%;
border-style: solid;
}
.Down-Arrow {
text-align: center;
position: relative;
top: -574px;
}
.white-button1 {
float: right;
display: inline-block;
position: absolute;
right: 53%;
bottom: -260px;
border-style: solid;
z-index: 1;
}
.white-button2 {
float: right;
display: inline-block;
position: absolute;
right: 53%;
bottom: -60px;
border-style: solid;
z-index: 1;
}
.white-button3 {
float: right;
display: inline-block;
position: absolute;
right: 44%;
bottom: 19px;
border-style: solid;
}
.black-button {
float: right;
display: inline-block;
position: absolute;
right: 43.4%;
bottom: -170px;
border-style: solid;
}
.cursor {
float: right;
display: inline-block;
position: absolute;
right: 43.4%;
bottom: -172px;
border-style: solid;
}
.angle {
float: right;
display: inline-block;
position: absolute;
right: 35.8%;
bottom: -267px;
border-style: solid;
}
.cursor {
float: right;
display: inline-block;
position: absolute;
right: 43.4%;
bottom: -174px;
border-style: solid;
z-index: 1;
}
.content-alt {
float: left;
margin-left: 100px;
margin-left: 5%;
position: absolute;
top: 750px;
left: 170px;
width: 20%;
}
.content-alt2 {
float: left;
margin-left: 100px;
margin-left: 5%;
position: absolute;
top: 918px;
left: 170px;
width: 20%;
}
.content {
float: right;
margin-right: 100px;
margin-right: 5%;
position: absolute;
top: 750px;
right: 165px;
width: 20%;
}
.content2 {
float: right;
margin-right: 100px;
margin-right: 5%;
position: absolute;
top: 918px;
right: 165px;
width: 20%;
}
.alternate {
float: left;
margin-left: 100px;
margin-left: 5%;
position: absolute;
left: 110px;
width: 36%;
}
.other {
display: none;
text-align: center;
}
.near-bottom {
display: none;
text-align: center;
}
footer {
word-spacing: 30px;
}
.text {
font: 16px HelveticaNeue, sans-serif;
line-height: 1.6;
font-weight: 400;
}
.footer {
display: none;
font: 16px HelveticaNeue, sans-serif;
font-weight: 400;
}
.Image {
display: none;
text-align: center;
}
<header>
<h1> <img style="vertical-align:middle" src="img/focus.png" /><span class="Header-Type">Focus</span></h1>
<p>A landing page for your app with focus</p>
</header>
<div class="Down-Arrow">
<img src="img/down-arrow.png" />
</div>
<div id="white">
<div class="Phone">
<img src="img/iphone.png" />
</div>
<div class="white-button1">
<img src="img/white-dot.png" />
</div>
<div class="white-button2">
<img src="img/white-dot.png" />
</div>
<div class="white-button3">
<img src="img/white-dot.png" />
</div>
</div>
<div class="black-button">
<img src="img/Black-dot.png" />
</div>
<div class="cursor">
<img src="img/cursor.png" />
</div>
<div class="angle">
<img src="img/angled-line.png" />
</div>
<div class="grey"></div>
<div id="text-content">
<div class="content-alt">
<h2>Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
<div class="content">
<h2>Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
<div class="content-alt2">
<h2>Another Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
<div class="content2">
<h2>Another Great Feature</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum velit vitae nulla molestie eu. </div>
</div>
</div>
<div class="alternate">
<h2>Get The App Today!</h2>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id sollicitudin
ante lobortis at.</div>
</div>
<div class="other">
<h3>“Focus is an app that is extremely useful. I would reccomend it to anyone.”</h3>
<div>Kyle Turner, Blogger</div>
</div>
<div class="Image">
<img src="img/people.png" />
</div>
<div class="near-bottom">
<h4>Say Hi & Get in Touch</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</div>
</div>
<footer>
<p class="footer">Contact Download Press Email Support</p>
</footer>
JSFiddle