调整窗口大小可在正文标记旁边创建边距

我偶然发现了一个非常烦人的问题。当我的项目在1920px到1050px之间查看时，一切都很正常，都是我想要的方式。
当我将其调整到1050px以下时，会出现一些奇怪的边距
http://imgur.com/a/UFrz9
编辑：https://jsfiddle.net/5fj7336t/2/
我发现是margin-left:60%;导致了这个问题。

.bannerOverlay {
      /*position*/
      position: absolute;
      width: 400px;
      top: 350px;
      margin-left: 60%;
      padding: 10px; /*Readable text*/
      color: white;
      background-color: rgba(31, 31, 31, 0.5);
      box-shadow: 0px 0px 20px black;
    }

右边的"边距"在检查元素工具中不显示为边距
我正在使用浏览器重置模板
即使主体是100%的宽度，它仍然显示边缘
使用SASS生成我的CSS。（我怀疑这会引起什么麻烦）

下面是我的CSS代码和HTML代码。我希望有人能帮我去掉这个空白。

body {
  font-family: 'Lato', sans-serif;
  background-color: white;
  width: 100%;
}
header {
  position: fixed;
  z-index: 999; /*overlay ALL*/
  width: 100%;
  height: 100px;
  top: 0; /*Stay. Away.*/
  background-color: #1f1f1f;
}
header div {
  padding: 20px 0px 80px 0px;
  width: 800px;
  display: block;
  margin: 0 auto;
}
header h1 {
  display: block;
  float: left;
  color: #e7e5e5;
  font-size: 2.5em;
  font-weight: bold;
}
header h2 {
  display: block;
  color: #BFBFFF;
  font-size: 0.9em;
  position: absolute;
  margin-top: 40px;
  margin-left: 20px;
}
header nav {
  float: right;
}
header nav ul {
  padding-top: 42px;
}
header nav ul li {
  display: inline-block;
  text-align: center;
  margin-right: 5px;
  margin-left: 5px;
}
header nav ul li a {
  text-decoration: none;
  color: #e7e5e5;
  opacity: 0.6;
}
header nav ul li a:hover {
  border-bottom: 5px solid #eeeeee;
  padding-bottom: 2px;
  opacity: 1;
  transition: opacity 0.25s ease-in;
  -moz-transition: opacity 0.25s ease-in;
  -webkit-transition: opacity 0.25s ease-in;
}
header nav ul li.current a {
  border-bottom: 5px solid;
  padding-bottom: 2px;
  opacity: 1;
}
.banner {
  top: 0;
  margin-top: 100px;
  height: 700px;
  width: 100%;
  position: fixed;
  background-image: url(../Images/banner.jpg);
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.8;
  z-index: -1;
}
.bannerOverlay {
  /*position*/
  position: absolute;
  width: 400px;
  top: 350px;
  margin-left: 60%;
  padding: 10px; /*Readable text*/
  color: white;
  background-color: rgba(31, 31, 31, 0.5);
  box-shadow: 0px 0px 20px black;
}
.bannerOverlay h2 {
  font-size: 3em;
  padding-bottom: 10px;
}
.bannerOverlay p {
  line-height: 1.2em;
}
.fadeFix {
  margin-top: 700px; /*banner size*/
  height: 100px; /*100px overlay*/
  background-color: white;
  z-index: 2;
  background: -moz-linear-gradient(bottom, white 0%, rgba(255, 255, 255, 0) 100%);/* FF3.6-15 */
  background: -webkit-linear-gradient(bottom, white 0%, rgba(255, 255, 255, 0) 100%);/* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to top, white 0%, rgba(255, 255, 255, 0) 100%);/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.content {
  height: 500px; /*temp filler*/
  background-color: white;
  z-index: 2;
}
.content .whiteBoxContent .intelBox {
  width: 500px;
  margin: 0 auto;
}
.content .whiteBoxContent .intelBox h2 {
  font-size: 3em;
  padding-top: 20px;
  padding-bottom: 20px;
  display: block;
  text-align: center;
}
.content .whiteBoxContent .intelBox p {
  display: block;
  width: 500px;
  text-align: center;
}

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link href='https://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
  <link href="../CSS/browser_reset.css" rel="stylesheet" type="text/css" />
  <link href="../SO/css.css" rel="stylesheet" type="text/css" />
  <title>title</title>
</head>
<body>
  <header>
    <div>
      <!-- divbox-->
      <h1>title</h1>
      <h2>sub</h2>
      <nav>
        <ul>
          <li class="current">
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">n1</a>
          </li>
          <li>
            <a href="#">n2</a>
          </li>
          <li>
            <a href="#">n3</a>
          </li>
          <li>
            <a href="#">n4</a>
          </li>
          <li>
            <a href="#">n5</a>
          </li>
          <li>
            <a href="#">n6</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <section class="banner">
    <!-- Fixed position -->
  </section>
  <section class="fadeFix">
  </section>
  <section class="content">
    <div class="bannerOverlay">
      <h2>title</h2>
      <p>
        content
      </p>
    </div>
    <div class="whiteBoxContent">
      <div class="intelBox">
        <h2>title</h2>
        <p>
          content
        </p>
      </div>
    </div>
  </section>
</body>
</html>

我在body中添加了margin:0;，边距消失了（默认情况下，chrome在body元素中添加了8px的边距-我不知道它是否在所有其他浏览器中）

编辑：将overflow:hidden添加到主体（现在，当我看到你的jsfiddle时）

我发现margin-left 60%;导致了这个问题。

.bannerOverlay {
      /*position*/
      position: absolute;
      width: 400px;
      top: 350px;
      margin-left: 60%;
      padding: 10px; /*Readable text*/
      color: white;
      background-color: rgba(31, 31, 31, 0.5);
      box-shadow: 0px 0px 20px black;
    }

相关内容

最新更新

热门标签：