padding-left: 10%; on the 'footer' css selector is causing the page to be wider than 100%. Padding gets added to the overall width.
Remove the width: 100%; - By default containers will take up 100% width of their parent container (as long as no 'float' is set and I cant immediately see a reason to want to float the 'footer') ) -so no need to set it.
Change this:
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
background-color: #333;
padding-left: 10%;
}
To this:
#footer {
clear: both;
overflow: hidden;
display: block;
background-color: #333;
padding-left: 10%;
}