title: CSS: How can I get rid of the default window "padding"? An element set to 100% width doesn't reach the window's borders
body: <p>So I have an element that is placed directly inside body:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="header"&gt;Some stuff...&lt;/div&gt;
      Other stuff...
  &lt;/body&gt;
  </code></pre>
  
  <p>The following is the CSS used:</p>
  
  <pre><code>body{
      text-align:center;
  }
  #header{
      margin:auto;
  }
  </code></pre>
  
  <p>So the #header div is set to 100% width (default) and is centered. Problem is, there's a "space" between the window border and the #header element... Like:</p>
  
  <pre><code>|  |----header----|   |
  ^window border        ^window border
  </code></pre>
  
  <p>I tried adjusting it with javascript, and it successfully resizes the element to the exact window width, but it doesn't eliminate the "space":</p>
  
  <pre><code>$('#header').width($(window).width());
  </code></pre>
  
  <p>One solution seems to be to add the following CSS rules (and keep the javascript above):</p>
  
  <pre><code>#header{
      margin:auto;
      position:relative;
      top:-8px;
      left:-8px;
  }
  </code></pre>
  
  <p>In my browser this "space" is 8px - but I'm not sure if that's the same across all browsers? I'm using Firefox on Ubuntu...</p>
  
  <p>So what's the right way for getting rid of this space - and if it's what I used above, do all browsers act the same?</p>