Structure Web Page lesson in MDN Intro to HTML

Question?
How do I ‘center’ the Welcome text in the h2 header line 41. I have tried using style and text-align propert and the

 tag but nothing seems to work. The first header h1 is center Ed correctly. Thank you in advance for all help and what great support for learners that you provide. This is my first post and use of code pen so forgive me if I have not used it correctly. Thank you for your help!
Doug D.

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 :wink:

Feel free to follow up if you have more questions.

Greetings Chris,

Firstly I would like to thank you and your team for all the time and effort you must put into teaching novices such as myself to learn code. The MDN network is truly a unique and valued resource, and in this age is so important to the welfare and development of young people growing up in this digital age. As to myself, I am a retired radiologist, and am learning code simply to broaden my horizons, and as a hobby. However, it is comforting to know that my six grandkids have all these resources freely available to them to aid their progress through the advancing digital era. So again thank you for all the work you do.

Thank you also for providing me with the additional information re this lesson in structuring web pages…I never would have figured that one out without your extra teaching.

I very much enjoy your HTML course, and look forward to getting into the CSS and JS sections of it.

All the best from the West Coast of Canada, and Merry Christmas to you and your colleagues.

Doug Dyer

Victoria BC

addyer@telus.net

1 Like

@addyer Thanks Doug, it really means a lot to me and my team to get feedback like this. We are very passionate about documentation and helping people learn, and think it should be available to anyone who wants to learn.

I hope you have a happy festive holiday too, and feel free to send in more questions as they come up.