Content not touching the sides of the screen

Question

I want to have my header in a div, but the div isn't directly touching any of the page, but there is a little bit of room on the sides. Why? And how can I remove that? The div is just

<div class="header">
    <img src="images/header.png" width="600" height="252" alt="Header" />
</div>

And the style.css file contains

.header {
    background: url(../images/header_extend.png) repeat-x center;
    overflow: hidden;
}
.header img {
   display:block;
   margin:0px auto;
   max-width: 100%;
   height: auto;
   overflow: hidden;
}

The header_extend.png is to fill the rest of the screen width.

Answer 1

You should remove the default margin from the body tag.

body { margin:0 }

Additionally, if you want to use percentage for the .header div's width, you should specify the parent's width as well. In case the parent is the body tag, this is what you can do:

body { 
    margin: 0;
    width: 100%; 
}

Here's a fiddle