100% width fixed div has left margin only in IE7

Question

I have this piece of code below, and it works fine in every modern browser and in Internet Explorer for the most part, but not in IE7.

The header is not filling the whole body width and it appears that in IE7 the header div has a left margin. It starts from where the main div is located.

Anybody an idea how I can fix this?

CSS

div#header {
    z-index: 200;
    position: fixed;
    width: 100%;
    background: -webkit-linear-gradient(top, #232323 0%, #1f1f1f 100%);
    box-shadow: 0px 0px 13px #3a3a3a;
    -webkit-box-shadow: 0px 0px 13px #3a3a3a;
    font-size: 13px;
}

div[role=main] {
    position: relative;
    width: 970px;
    margin: 0 auto;
    padding: 52px 15px 45px 15px;
}

HTML

<div id="header">header content</div>
<div role="main">main content</div>

Answer 1

Add

top: 0;
left: 0;

to div#header

It's always a good idea to specify a top and left, IE seems to like that