Question

我根据我的作业制作了我的页面，除了我所做的事情导致我的页面右侧出现了一个额外的15px，但你必须水平滚动才能看到它。我不确定我做了什么导致了这一点，但我真的希望得到一些帮助，以及如何解决它。

我的代码：

＆＃13;

body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: url("images/background.jpg") no-repeat center center fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-color: rgb(153, 145, 122);
  background: -webkit-linear-gradient(left, aqua, mediumslateblue);
  background: -o-linear-gradient(right, aqua, mediumslateblue);
  background: -moz-linear-gradient(right, aqua, mediumslateblue);
  background: linear-gradient(to right, aqua, mediumslateblue);
  font: 1em Verdana, sans-serif;
}

header {
  position: inline;
  width: 100%;
  margin: 0 auto;
  margin-top: 0;
  padding: 0;
  height: 60px;
  line-height: 40px;
  background-color: black;
}

ul {
  margin: 0 auto;
  margin-right: 5px
}

.imagesEnlarged {
  margin: 0 auto;
  width: 45%;
  height: 45%;
}

.logo {
  color: white;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}

.nav {
  float: right;
  color: white;
  margin: 0;
  margin-top: 0;
}

nav ul li {
  display: inline;
  float: right;
  padding: 0 5px
}

.banner {
  background: url("images/background.jpg") no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  height: 200px;
  width: 100%;
}

#wrapper {
  margin: 5px;
  width: 100%;
}

.buttonHolder {
  display: block;
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -50%);
}

.buttonHolderGallery {
  display: block;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
}

#text {
  Width: 100%;
  padding: 0;
}

li {
  list-style-type: none;
  float: right;
  border-left: 1px solid white;
}

li a {
  display: block;
  padding: 8px;
  background-color: black;
}

li a:hover {
  background-color: grey;
}

.gallery {}

footer {
  position: fixed;
  text-align: left;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 65px;
  background-color: black;
}

@media only screen and (max-width:1200px) {
  body {
    font-size: 0.8em;
  }
  .buttonHolder {
    top: 65%;
  }
  footer {
    font-size: 0.9em;
  }
  .client {
    display: inline;
    width: 40%;
  }
}

@media only screen and (max-width:800px) {
  body {
    font-size: 0.6em;
  }
  .buttonHolder {
    top: 65%;
  }
  footer {
    font-size: 0.9em;
  }
  .images {
    display: block;
    width: 80%;
  }
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.white {
  color: white;
  text-align: center;
  float: right
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 10px;
  text-align: center;
  text- decoration: none;
  border-radius: 50%;
}

.newspaper {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
  -webkit-column-gap: 60px;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 60px;
  /* Firefox */
  column-gap: 60px;
  margin-right: 15px;
}

.split {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
  -webkit-column-gap: 80px;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 80px;
  /* Firefox */
  column-gap: 80px;
  margin-right: 15px;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<header>
  <div class="logo">Photography Masters</div>
  <nav>
    <ul>
      <li><a href="#link"> About</a></li>
      <li><a href="#link"> Contact</a></li>
      <li><a href="#link"> Gallery</a></li>
      <li><a href="#link"> Services</a></li>
    </ul>
  </nav>
</header>

<section class="banner">
</section>

<div id="wrapper">
  <section id="text">
    <h1>About Us</h1>
    <section class="split">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum feugiat risus, a vulputate enim imperdiet at. Suspendisse nec nisi ut sem efficitur pulvinar. Proin eros ex, scelerisque eget eleifend non, vestibulum sit amet lacus. Sed
        dignissim eget libero quis condimentum. Cras ullamcorper aliquet orci ut maximus. Sed congue sem non dui sagittis ultricies non a turpis. Maecenas at mi vestibulum, tempor leo venenatis, sodales massa. Mauris commodo ac mauris a tincidunt. Nunc
        et neque sagittis, ultrices tellus nec, tincidunt mi. Nulla pretium leo libero, quis molestie arcu venenatis et. Phasellus dapibus sem ac tristique gravida. Aliquam felis augue, efficitur egestas orci vitae, convallis viverra nisi. Vivamus quis
        molestie erat, quis gravida arcu. Aliquam enim orci, accumsan sed justo ut, hendrerit lobortis nibh.
        <img class="imagesEnlarged" src=images/about.JPG alt="Model Shoot">
      </p>
    </section>
    <p>Aliquam quis laoreet enim. Nam eu nunc eu sem suscipit ullamcorper bibendum et velit. Nunc sit amet dui elit. Nullam malesuada, leo ut facilisis tristique, neque massa tempor nibh, vel dignissim nulla sapien fringilla orci. Integer sit amet eros vehicula,
      eleifend velit vel, venenatis metus. Quisque mattis semper vulputate. Ut eu malesuada est, non luctus ipsum. Etiam sed urna viverra, tincidunt est vitae, malesuada diam. Pellentesque ipsum nisi, posuere sed sem at, ultrices tempus dolor. Cras suscipit
      non odio sed tincidunt. Nam ut nisi quis elit semper tempus. Proin ac aliquam quam. Sed luctus convallis hendrerit. </p>
    <div class="buttonHolderGallery">
      <input class=button type="submit" value="See More">
    </div>
  </section>
</div>

<footer class="grey2">
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-linkedin"></a>
  <a class="white"> Copyright Photography Masters 2017</a>
</footer>

＆＃13;

Answer 1

包装器<div>上的边距导致此问题。您可以将此div的CSS更改为：

margin: 5px 0px 5px 0px;

删除左侧和右侧的边距，只保留在顶部和底部;摆脱造成问题的多余空间。

Answer 2

由于您添加了此ID而导致的正确空间。只需删除宽度：100％;从这个id。

#wrapper {
    margin: 5px;
    width: 100%; (no need take this out)
}

Answer 3

每当我遇到类似问题时，我都希望通过为每个元素添加红色边框来调试它，以查看导致问题的原因

*{
  border: 1px solid red!important;
}

我能够通过删除#wrapper元素的右边缘来减少水平滚动。

Answer 4

使用。

更新 #wrapper css

#wrapper {
 padding: 0 2%;
 width: 96%;
}

我的页面右侧有一个奇怪的空白

4 个答案: