title: resizing browser does not resize div correctly - so simple what am I doing wrong?
body: <p>When I shrink the browser width I expect the header div to shrink along with the browser and take up the entire width of the page.  Instead the div stops at the browser width and then there is blank space to the right and a horizontal scroll bar.  This seems to be a problem with the way I'm using bootstrap but I can't figure it out.  Any help appreciated</p>
  
  <p>I'm using the latest minified bootstrap css in my project and have completely simplified my layout below.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt; 
  
   &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="bootstrap.min.css" /&gt;
   &lt;/head&gt;
  
   &lt;body&gt;
    &lt;div class="row"&gt;
     &lt;div class="header"&gt;
      &lt;div class="container"&gt;
       &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>body {
   background-color: #CDE0E4;
   width: 100%;
  }
  
  .header {
   position: relative;
   height:120px;
   background-color:#CDE0E4;
   box-shadow: 0 0px 15px #272727;
  }
  </code></pre>
  
  <p>Thanks</p>