Page header extends right to the edge of the browser, but the main body has a gap, causing inconsistant look

Question

I am writing a web page for my coursework, its a fairly simple page but I have noticed one problem I cant solve, and it is that the header of the site extends right to the edge of the page, but the footer and main body have a gap of white space meaning they do not stick out as far to the side. not sure how to fix this any answers are appreciated

here is a pastebin of my code if you wish to have a look, first half is css second half is html http://pastebin.com/P86dFrcE

Answer 1

You need to add box-sizing to the header so the width:100% includes the padding and it won't overflow the page. Also position middle is not a thing. I'd take it out and leave it as default position:relative;

more about box-sizing here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

.header{
    min-height: 40px;
    margin-bottom: 5px;
    width:100%;
    box-sizing:border-box;
}