title: position: fixed caused element to be wider than browser
body: <p>Can anyone tell me why position:fixed cause the element to be wider than the browser or other content on the page and causing horizontal scrolling?</p>
  
  <p>Here is the code
  HTML</p>
  
  <pre><code>&lt;header&gt;
       this is a header
  &lt;/header&gt;
  
  &lt;div class="container"&gt;
       this is a container
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code> header {
        width: 90%;
        height: 100px;
        background: blue;
        position: fixed;
        z-index: 100;
   }
  
  .container {
       width: 90%;
       height: 500px;
       background: red;
       position: relative;
       z-index: -2;
  }
  </code></pre>
  
  <p>Here is a link to the codepen <a href="http://codepen.io/colbydodson/pen/wcgua" rel="noreferrer">http://codepen.io/colbydodson/pen/wcgua</a></p>