title: fixed div with 100% width overlaps scrollbar
body: <p>As demonstrated here: <a href="http://codepen.io/anon/pen/rVPqeL" rel="noreferrer">http://codepen.io/anon/pen/rVPqeL</a></p>
  
  <p>I am using 3 simple divs and I want to obtain an effect of a "global" scrollbar that has to go <strong>over</strong> the header.</p>
  
  <p>The html is very basic</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="header"&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here's the css:</p>
  
  <pre><code>.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: gray;
    overflow-y: scroll;
  }
  
  .header {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: red;
  }
  
  .content {
    margin-top: 50px;
    min-height: 2500px;
    background-color: blue;
  }
  </code></pre>
  
  <p>The scrollbar keeps going <strong>under</strong> the header div. What am I doing wrong?</p>