title: Header doesn't cover entire screen
body: <p>I'm trying to get the background image of my homepage (www.insaka.org), to cover the entire width of the screen, but I can't seem to figure it out. <strong>I don't want the entire website to stretch, just the image</strong>. Any ideas?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;header class="business-header"&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-6"&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-6 top-buffer"&gt;
              &lt;h1 class="tagline"&gt;Insaka&lt;/h1&gt;
              &lt;h4 class="tagline"&gt;Increasing access to education for rural Zambian girls&lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.business-header {
  background: url("/images/Insaka poster girls.JPG") center center no-repeat scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  }
  
  main {
    @extend .container;
    margin-top: 30px; // accommodate the navbar
  }
  
  section {
    @extend .row;
    margin-top: 20px;
  }
  </code></pre>