text-align: center bereitet, abhängig davon, ob es in einem Grid-Item auftritt oder „normal“, Probleme mit Sonderzeichen wie einem Fragezeichen am Ende des Textes. Firefox schiebt dies dann auch mal bedenkenlos über die content-box hinaus, Safari beläßt den Text immerhin innen. Aber: so ein Sonderzeichen an einem Ende des Textes wird bei der Berechnung der Box anscheinend nicht, nur „manchmal“ (Grid oder nicht Grid, das ist die Frage) berücksichtigt.
body {
display: grid;
max-width: calc(100vi - 20px); /* vi kompatibel mit px!!! */
height: 100vb;
max-height: calc(100vb - 20px); /* … und vb kompatibel mit px */
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: start;
}
h1 {
width: max-content;
margin: auto;
padding: 5% 10%;
}
<header>
<h1>Alles nur eine Frage?</h1>
</header>