The culprits are the header and the footer: you set those to float:left and width: 100%, and top it off with left and right paddings, which add up to the overall width of both. The standard box model behaviour states that width, padding, borders, and margins are all added up. So 100% plus 20% padding results in a 120% wide header. Which explains your issue.
Simple solution is to add this line at the top of your css code:
*,*:before,*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
This changes the box model behaviour and allows you to use padding and borders with a fixed width element.
And remove the float:left and width: 100% from your header and footer. Replace with the line:
overflow: hidden;
or add a clearfix class to both the header and footer.
You do have a lot of superfluous css properties applied to most elements. Use the inspect element in your browser to turn off properties and test which are essential, and which can be removed.
