Dlaczego ten CSS dodaje pasek przewijania do mojej strony i usuwa całą zawartość strony? - html, css

Stworzyłem stronę z prostym formularzem, a następnie dodałem kilka podstawowych stylów, aby wyrównać poziom i wygląda na to, że usunął zawartość strony i dodał pasek przewijania.

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/

Odpowiedzi:

1 dla odpowiedzi № 1

Twoim problemem jest włączenie marginesówbody, header i nav, to rozszerza zawartość, można to naprawić, ustawiając margines na 0 lub po prostu usuwając wszystkie wystąpienia marginesu: 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%;
}

Próbny: jsfiddle

---

2 dla odpowiedzi nr 2

css

 html {
font-size: 1em;
}
body {
background-color: #CCFFCC;
padding: 0;
margin: 0;
}
header {
padding: 0;
}
nav {
padding: 0;
}
nav li {
padding: 0;
}

próbny

---

2 dla odpowiedzi nr 3

jeśli chcesz zapewnić obramowanie swojej strony, spróbuj tego

html {
font-size:1em;
}

body {
background-color: #CCFFCC;
max-width: 100%;
padding: 0;
border:2px solid grey;
height:1000px;
}

header {
padding: 0;
max-width: 100%;
}

nav {
padding: 0;
max-width: 100%;
}

nav li {
padding: 0;
max-width: 100%;

}

---

1 dla odpowiedzi nr 4

Problem dotyczy margin: 100%. Usuń wszystkie. Nie musisz nawet ustawiać maksymalnej szerokości na 100%!

html {
font-size:1em;
}

body {
background-color: #CCFFCC;
padding: 0;
}

nav li {
padding: 0;
}

https://jsfiddle.net/rz9Lv837/5/

---

0 dla odpowiedzi № 5

Zastąp swoje css:

html {
font-size:1em;
}

body {
background-color: #CCFFCC;
padding: 0;
max-width: 100%;
}

header {
padding: 0;
max-width: 100%;
}

nav {
padding: 0;
}

nav li {
padding: 0;
max-width: 100%;
}

Prosimy pamiętać, że podanie marginesu w „%” nie jest dobrą praktyką, postaraj się, aby było to specyficzne, lub jeśli potrzebujesz strony, powinna być responsywna, abyś mógł użyć zapytania o media lub dowolnej struktury.

---