Hi @addyer, and welcome to the community!
This is a really interesting one. The reason why this isn’t centering as you’d expect is because you’ve put a <header>
element around it <h2>
, and the supplied CSS contains this rule:
header {
margin-bottom: 10px;
display: flex;
flex-flow: row wrap;
}
Applying display: flex
to an element makes all of its children by default change so that they are only as wide as their contents (in this case, the <h2>
's text), and not 100% of the width of their parent element. So the <h2>
is being centered by your text-align: center
declaration, but it only as long as the text inside it, so you are not seeing the effect.
If you remove the <heading>
element, and have the <h2>
sat directly inside the <article>
, you’ll see the effect you wanted.
But your usage of the <header>
element inside the article is perfectly valid, so instead, you might want to go into the CSS, find the rule I referenced above, and change the header
selector to body > header
, so it only affects the <header>
directly inside the <body>
.
So this isn’t really your fault at all…it is the fault of my CSS for not being as bulletproof as I’d hoped
Feel free to follow up if you have more questions.