HTML5 Responsive Web Design: Fixed Header Not Working - html

Question

I'm trying to create a basic HTML5 responsive web design where the header is fixed. I am trying to keep my HTML and CSS code clean and follow best practices. The header has a max width of 980 pixels but the blue header background expands to fill the window (see the diagram).
Right now there's a few issues with my CSS (maybe my HTML) that are causing the header to cover up the content below the header. The header's blue background is also not expanding to fill the left of the window. I also can't get the logo image to center vertically on the header. What I am I missing? I've been playing around with this all night but I've been unable to iron out these issues.
Fiddle: http://jsfiddle.net/DU3D6/
CSS
* { margin: 0; padding: 0; }
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
#wrapper {
width: 100%;
max-width: 980px;
margin: auto;
}
header {
background-color: blue;
width: 100%;
height: 100px;
top: 0px;
display: block;
margin-left: auto;
margin-right: auto;
position: fixed;
}
#logo {
height: 70px;
width: 160px;
float: left;
display: block;
background: url(logo.png) 0 0 no-repeat;
text-indent: -9999px;
}
HTML
<div id="wrapper">
<header>
Logo
</header>
<section id="main">
<h1>Main section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
I deleted and reposted with updated the tags.

Answer 1

You can remove the margin-left and margin-right from the header. Then add left zero. The JSFiddle doesn't show the image since it's a relative link, but if you want it left aligned but within the 980px centered block, then nest another div inside the header with width 980 and centered.
Then to make the header not cover the content initially, add a top margin bigger than the header, like 110px.
http://jsfiddle.net/A4atq/
* { margin: 0; padding: 0; }
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
#wrapper {
width: 100%;
max-width: 980px;
margin: auto;
}
header {
background-color: blue;
width: 100%;
height: 100px;
top: 0px;
left: 0;
display: block;
position: fixed;
}
#logo {
height: 70px;
width: 160px;
float: left;
display: block;
background: url(logo.png) 0 0 no-repeat;
/* text-indent: -9999px */;
}
section#main {
margin-top: 110px;
}
}