边距为白色。如何将其更改回背景颜色？

Question

Here is a picture of what I want changed to blue

这是我的 html 和 css 代码：https://jsbin.com/cofeweqaca/edit?html,css,output

好吧，奇怪的事情发生了。当我创建 jsbin 来向您展示我的所有问题时，问题并不存在。所以我的问题以某种方式存在于崇高之中。我的问题是：2个灰色div之间的空间（顶部是jumbotron，底部不是）。应该是蓝色的，就像在 jsbin 中一样。但是在我的崇高中，当我在 Chrome 中打开它时，它是白色的。除了两个 div 之间的小条纹外，其他所有内容都是蓝色的。 我对 Web 开发人员场景非常陌生。所以也许比我更聪明的人可以解释这个问题的原因？为什么是白色的？谢谢！

编辑：这是我的直接代码。

html {
  font-family: 'Droid Sans', sans-serif;
}
#navb {
  background: #3E474C;
}
#bs-example-navbar-collapse-1 ul li a {
  color: white;
}
li:hover {} html {
  background: #A5BCCC;
}
body {
  background: #A5BCCC;
}
#rankjumbo {
  margin-top: 100px;
  height: 350px;
  margin-bottom: 0;
}
.searchbox {
  width: 50%;
  margin: auto auto;
}
#text {
  text-align: center;
  font-family: 'Droid Sans', sans-serif;
}
#h1 {
  font-family: 'Pacifico', cursive;
  text-align: center;
  padding-bottom: 30px;
}
#button {
  background: #4B7795;
  color: white;
  font-family: 'Droid Sans', sans-serif;
}
.list {
  height: 300px;
  background: #eee;
  margin-top: 30px;
}

<div id="rankjumbo" class="jumbotron">

  <div class="container">

    <div id="special">

      <h1 id="h1">Rank.gg</h1>

      <div class="searchbox">
        <input id="text" class="form-control" type="text" placeholder="Enter your IGN...">
        <button id="button" class="btn btn-default btn-block">See Where You Rank!</button>

      </div>
    </div>


  </div>
</div>

<div class="list">



</div>

Answer 1

这是因为#rankjumbo 内部的高度和空白的 div 类“列表”删除了 css .list 并使您的 #rankjumbo 像这样Live Fiddle

#rankjumbo{
margin-top:100px;
margin-bottom: 0;

}

Answer 2

我通过将引导链接移动到我的 html 中的样式表上方来修复它。