body mittig ausrichten mit Rand

[Matthias Scharwies]

Servus!

Hallo,

max-width:100%;

Der body steht schon auf max-width, aber in Pixel. Das sollte auch so bleiben, gibt es eine andere Möglichkeit?

body {
   max-width: 1000px;
   margin: 2em;
   font-size: 1em;
   margin-left: auto;
   margin-right: auto;
}

Und was machst du mit einem Handy mit nur 30em Breite (ca. 480px)?

Bitte nimm

html { 
  box-sizing: border-box; 
} 

*, ::before, ::after { 
box-sizing: inherit; 
}

body {
  max-width: 60em;    /* oder max. 75em; maximale Breite, damit Zeilen nicht zu lang sind */
  margin: 2em auto;     /* zentriert, 2em Abstand oben und unten */
  padding: 2em;       /* sorgt für Innenabstand, wenn die Breite 100% beträgt */
}

Das box-sizing sorgt dafür, dass der Innenabstand zu den 100% gehört und nicht dazugerechnet wird.

Herzliche Grüße

Matthias Scharwies