Div padding not disappearing; white border
<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#page-container {
  position: absolute;
  margin: 0px;
  padding: 0px;
  border: 0px;
}
#header {
  background-color: #f9f8e5;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 20px;
  margin-top: -10px;
  padding: 0px;
  border: 0px;
  width: 100%;
  height: 200px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;

  &lt;div id="header"&gt;
    &lt;center&gt;
      &lt;br&gt;
      &lt;a href="index.html"&gt;
        &lt;img src="images/logo.png"&gt;
      &lt;/a&gt;
    &lt;/center&gt;
  &lt;/div&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Just a quick one, and the solution is probably somewhat obvious and is eluding me, essentially there is a border around my container div for my website, margins, padding and borders are all set to 0 so why the border is still there i have no idea. The background colour fill is on the 'header' div, and from this I can see the evident white lines either side of the div. Any help is appreciated, code below.</p>

<p>CSS:</p>

<pre><code>#page-container 
{
position:absolute;
margin: 0px;
padding: 0px;
border: 0px;
}

#header 
{
background-color: #f9f8e5;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-top: -10px;
padding: 0px;
border: 0px;
width: 100%;
height: 200px;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="container"&gt;

        &lt;div id="header"&gt;
        &lt;center&gt;
        &lt;br&gt;
        &lt;a href="index.html"&gt;&lt;img src="images/logo.png"&gt;&lt;/a&gt;
        &lt;/center&gt;
        &lt;/div&gt;

&lt;REST OF WEBPAGE&gt;

&lt;/div&gt;
</code></pre>