title: Website header does not stretch 100% on window resize
body: <p>So my website <a href="http://dealminion.com" rel="nofollow">http://dealminion.com</a> has a header that is set to 100%. However if I resize the browser window then scroll to the right the header stops but the page keeps going. It's very odd. If you go to the site and resize the window you will see what I am saying.
  Here is the css: </p>
  
  <pre><code>#header-intro { 
  width: 100%; 
  position: absolute; 
  height: 600px; 
  padding-top: 25px;
  background-color: #657b90;
  border-bottom: 1px solid #000000;
  -moz-box-shadow: 0 5px 2px -2px #777777;
  -webkit-box-shadow: 0 5px 2px -2px #777777;
  box-shadow: 0 5px 2px -2px #777777;
  behavior: url('pie.htc');
  }
  </code></pre>
  
  <p>and the body css:</p>
  
  <pre><code>html, body { 
  margin: 0; 
  padding: 0; 
  height: 100%;
  width: 100%;
  background: #f8f8f8;
  }
  </code></pre>
  
  <p>Is there any reason why this is happening?</p>