Confused by bootstraps grid system, attempting to display everything as multiple rows of one centered column

Question

I am trying to build a layout where all my content is displayed as one vertical column with each row having the exact same width (80% of the screen is my desired width).

However for some reason some of my rows appear as different widths than others. Both the navbar and the bottom row container filler text are not the same width as the others. I tried playing around with different margins/padding but that doesn't seem to be working so I think the issue is something else but I can't quite figure out what.

This is my first time using bootstrap so the grid system is still somewhat confusing to me.

Here is my 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>

CSS

    .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;
}

Any ideas?

Answer 1

The grid system is functioning correctly, the reason your bottom column looks slightly wider is because you've applied the background-color: black; to both the paragraph and the column itself.
i.e.

 <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>

CSS

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

If you remove the id="stuff" from the bottom div the columns appearance is "fixed".
See this demo - http://jsbin.com/hehinupepe/edit?html,css,output