Html 被引导网格系统搞糊涂了，试图将所有内容显示为一个中心列的多行

我正在尝试构建一个布局，其中我的所有内容都显示为一个垂直列，每行的宽度完全相同（屏幕的80%是我所需的宽度）

然而，由于某些原因，我的一些行显示为与其他行不同的宽度。导航栏和底部行容器填充文本的宽度与其他文本的宽度不同。我尝试过使用不同的边距/填充，但似乎不起作用，所以我认为问题在于其他方面，但我不太清楚是什么

这是我第一次使用bootstrap，所以网格系统对我来说仍然有些混乱

这是我的html

  <nav class="navbar navbar-inverse navbar-fixed-top center-block">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="">Home</a></li>
           <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">About<b class="caret"></b></a>
            <ul class="dropdown-menu">
               <li><a href="#">Another page</a></li>
               <li><a href="#">A different page</a></li>
               <li><a href="#">Another page</a></li>
            </ul>
         </li>
          <li><a href="">A different page</a></li>
          <li class="end-of-navbar"><a href="">Another page</a></li>
        </ul>
      </div>

    </div>
  </nav>


  <div class="container-fluid" id="main-container">

    <div class="row">
      <div class="col-md-12">
        <img class="img" src="http://placehold.it/900x300" id="banner"></img>
      </div>
    </div>


    <div class="row">
      <div class="col-md-12">
        <h2 id="big-text">Some Text</h2>
      </div>
    </div>


    <div class="row">
      <div class="col-md-12">
        <img src="http://placehold.it/900x300" id="photo"></img>
      </div>
    </div>


    <div class="row">
      <div class="col-md-12" id="stuff">
         <!-- Here is the row that is not displaying correctly, it appears slightly larger than the rest -->
        <p id="stuff">stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff</p> 
      </div>
    </div>

   </div>

---

有什么想法吗？

网格系统运行正常，您的下栏看起来稍宽的原因是您应用了

背景色：黑色到段落和列本身。

i、 e

如果从底部div中删除
id=“stuff”
，则列的外观是“固定的”。

查看此演示-
如果您想要具有特定大小的
宽度的单列布局，那么为什么要使用Twitter Bootstrap的网格系统呢？@HashemQolami对我来说，这似乎是获得响应性布局的最简单方法，因此在不同的屏幕大小上，所有内容都看起来不错。我可能是错的，因为您要应用相同的id两次（
id=“stuff”
），每页只使用一次id，并且在本例中只将其应用于
p
标记。@Jaymonta Responsive design是关于不同屏幕大小的不同场景。所以，如果我们在所有情况下都有相同的场景，这并不重要。@HashemQolami Correct。在这个特定的网站上，我将针对不同的屏幕大小使用不同的场景。
    .navbar {
    width: 80%;

}

#main-container {
    width: 80%;
}

#banner {
    padding-top: 60px;
    width: 100%;
    background-color: black;
}

#big-text {
    background-color: black;
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    font-family: 'Bowlby One SC', cursive;
}

#photo {
    width: 100%;
    margin-top: 0px;
}

#stuff {
    width: 100%;
    background-color: black;
    color: white;
}

 <div class="row">
      <div class="col-md-12" id="stuff">
         <!-- Here is the row that is not displaying correctly, it appears slightly larger than the rest -->
        <p id="stuff">stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff</p> 
      </div>
    </div>

#stuff {
    width: 100%;
    background-color: black;
    color: white;
}