Why does this CSS add a scrollbar to my page and remove all the page's content?

Question

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%;

}

https://jsfiddle.net/rz9Lv837/

Answer 1

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

Why does this CSS add a scrollbar to my page and remove all the page's content?

Sign up