title: Bootstrap 3 full width div's in container-fluid
body: <p>I'm trying to create some "horizontal bands" in a Bootstrap 3 CSS layout, extending to the whole size of the browser's window, and thus outside of the content class margins. Here is a Plunker: <a href="http://plnkr.co/edit/6SlNU0ZgFehrBD64r9FG" rel="nofollow">http://plnkr.co/edit/6SlNU0ZgFehrBD64r9FG</a> . I found that I can accomplish this by using a <code>container-fluid</code> class: this implies having a div with that class including other div's, some representing my "bands", and others just using the <code>container</code> class. Thus, my relevant CSS is:</p>
  
  <pre><code>div.band {
    width: 100% !important;
    background-color: #D7EAD8;
    color: #323F3F;
  }
  </code></pre>
  
  <p>and my HTML:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row band"&gt;Hello band&lt;/div&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;...&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row band"&gt;Another band&lt;/div&gt;
    &lt;div class="container"&gt;
    &lt;div class="row"&gt;...&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Yet, this does not fully work as I keep getting some white margin at the right edge of the "band" div. I don't know Bootstrap internals and surely I'm doing something wrong, could anyone suggest a solution to make the "band" full-width?</p>