H1 won't center with margin: auto

[Porphyrogennitos]

According to Applied Visual Design: Center an Element Horizontally Using the margin Property, margin: auto; should center block elements horizontally.

I searched in MDN, and h1 is a block element.

Why with:

h1 { margin: auto; } isn’t centered but with `h1 { text-align: center; }, it is?

CodePen.

P.S. How to write multiline code?

[nibble]

Hello @Porphyrogennitos,
margin: auto will center a block level element within its container if you assign it a width.

[Porphyrogennitos]

Should I use text-align: center; or assign a width in a div that has the h1 nested?

[nibble]

I would recommend text-align: center;.