I created a page with a simple form then added some very basic styling to level things out and it appears to have removed the page content and added a scroll bar.
html {
font-size:1em;
}
body {
background-color: #CCFFCC;
padding: 0;
max-width: 100%;
margin: 100%;
}
header {
padding: 0;
max-width: 100%;
margin: 100%;
}
nav {
padding: 0;
max-width: 100%;
margin: 100%;
}
nav li {
padding: 0;
max-width: 100%;
margin: 100%;
}
Your issue is that you have included margins on the body, header and nav, this is expanding the content out, You could simply fix this by setting the margin to 0 or just removing all instances of margin:100%;
html {
font-size:1em;
}
body {
background-color: #CCFFCC;
padding: 0;
max-width: 100%;
}
header {
padding: 0;
max-width: 100%;
}
nav {
padding: 0;
max-width: 100%;
}
nav li {
padding: 0;
max-width: 100%;
}
Demo: jsfiddle