html - 为什么我的 body 不适应网页上的内容

Question

在使用覆盖网格尝试为页面添加内容时，我尝试放置的内容超出了正文边界？我正在尝试修复它，但我不知道该怎么做？我试过在 css 中引用 body 并调整高度，但没有任何进展。这是我的代码。

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

将 .grey 宽度更改为 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