Brandon Brandon - 5 months ago 9
HTML Question

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

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

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

Comments