Question

我是一个菜鸟，目前在我的第一个网站上工作（对于朋友）。现在它非常粗糙。我一直在试图让这个网站移动。问题是屏幕边缘有这些白色间隙（桌面和移动设备上）。我试图在桌面/移动设备上全屏显示并尝试使用'容器流体'，但它似乎没有用。任何帮助/提示/建议将不胜感激。以下是我目前在codepen中所拥有的内容： HTML：

h1,
body {
  font-family: 'Roboto';
}
.navbar {
  padding: 10px 0px 0px;
  margin-left: -25px;
  background-color: #7F462C;
}
.navbar a {
  color: #3FFF00;
  font-size: 12px;
  text-transform: uppercase;
  padding: 15px 10px 10px 15px;
  font-weight: bold;
}
.navbar-default {
  border: none;
}
.navbar a:hover {
  text-decoration: none;
  color: #FDD017;
}
.christiana-flag {
  width: 45px;
  height: 30px;
}
.navbar li {
  display: inline;
}
.home {
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
  font-family: 'Latto';
  color: #7F462C;
  background: url('http://blackgoldcompost.net/images/LeafBackground_227325_1800x1205_50.jpg') no-repeat center fixed;
  background-size: cover;
}
.intro > h1 {
  font-size: 5em;
  font-weight: bold;
}
.intro {
  position: relative;
  padding-top: 10%;
  padding-bottom: 20%;
}

<body>
  <!--Navigation-->
  <nav class="navbar navbar-default navbar-fixed-top" role='navigation'>
    <ul class='pull-left'>
      <li>
        <a href='#'>
          <img class='christiana-flag' src='#'>
        </a>
      </li>
    </ul>
    <ul class='pull-right'>
      <li><a href='#home'>Home</a>
        <li><a href='#about'>About</a>
          <li><a href='#how'>How it works</a>
            <li><a href='#service'>Service Area</a>
              <li><a href='#sign-up'>Sign-up</a>
                </u>
  </nav>
  <!--Home screen-->
  <div class='container-fluid'>
    <div class='row'>
      <div class='col-md-12'>
        <div class='home'>
          <div class='intro'>
            <h1>South Austin Compost</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--About-->
  <div class='container-fluid'>
    <div class='row'>
    </div>
  </div>
</body>

Answer 1

尝试设置正文margin: 0;？

这将是我猜测在没有jsFiddle的情况下提供的css。希望它有所帮助。

Answer 2

将正文的边距设置为0，它会为你修复它。

使背景适合屏幕（桌面/移动）

2 个答案: