title: Bootstrap full width image header creating white space gap
body: <p>I can't find solution for my problem. I am using part code from this template - <a href="http://blackrockdigital.github.io/startbootstrap-full-width-pics/" rel="nofollow">http://blackrockdigital.github.io/startbootstrap-full-width-pics/</a>  where is image with full width in header. </p>
  
  <p>Here is screenshot of my file - <a href="http://pasteboard.co/1E4k2zxf.png" rel="nofollow">http://pasteboard.co/1E4k2zxf.png</a>
  You can see on right side there is white gap. And you can scroll down from left to right (it looks like more than 100% width)</p>
  
  <p>In HTML i am using this class:</p>
  
  <pre><code>&lt;body&gt;
   &lt;div class="image-bg"&gt;&lt;/div&gt;
  .............
  </code></pre>
  
  <p>It's in body, it's not inside any other tag. I am using clear bootstrap 3.3.6 and custom.css with these lines:</p>
  
  <pre><code>.image-bg {
    background: url('http://lorempixel.com/g/1920/500') no-repeat center center scroll;
    height: 384px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
  }
  </code></pre>
  
  <p>And still it's not working. It creates margin or padding on right side of image, but it shouldn't. There isn't any other CSS file except bootstrap and custom.css.</p>
  
  <p>Thanks for you ideas :)</p>