title: Horizontal Scrollbar CSS
body: <p>I've got an issue which i've never had before up until this site and i can't figure out the problem.</p>
  
  <p>I build my sites with a wrapper set at 100% width; and a container set at 960px with a margin of '0 auto' to center the container. </p>
  
  <p>Most of the time (and as with this one) i have a header wrapper/container, main content wrapper/container and footer wrapper/container.</p>
  
  <p>In addition, my body is set to 100% width and height.</p>
  
  <p>The problem is my header wrapper is causing a very small scroll to occur, and when i scroll right to see, the entire  right of the page seems to have a 20 pixel margin.</p>
  
  <p>I don't seem to get the problem in Chrome, just IE and Firefox.</p>
  
  <p>My CSS is cleared with this at the beginning:</p>
  
  <pre><code>body, div, dl, dt, dd, ul, ol, li,
   h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
   margin: 0;
   padding: 0;
  }
  </code></pre>
  
  <p>My main body style is set as:</p>
  
  <pre><code>body {
  float: left;
  font-family: 'Verdana', 'Arial';
  background: #E3E3E3;
  width: 100% ;
  height: 100%;
  color: #5B5B5B;
  }
  </code></pre>
  
  <p>I'm a bit embarrassed to ask this as CSS bugs are normally a breeze to get through, but i've no idea with this. As for the other wrappers, as i mentioned, they're all set as:</p>
  
  <pre><code>wrapper { float: left; width: 100%; height: 100%;}
  content {width: 960px; margin: 0 auto; }
  </code></pre>
  
  <p>Any ideas? It's driving me insane!</p>