Help about CSS behavior!

I’m just want understand, in my example the h1 element don’t have a background like that abouve it, despite it is a part of the header element ?

If you have a question about a specific challenge as it relates to your written code for that challenge, and you’ve tried to solve it at least 3 times so far and still need some help, just click the Ask for Help button located on the challenge (it looks like a question mark).
This button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like

Dear Bakar brother, you check your hint . Create a CSS display =“flex” attribute .

1 Like

As you can see this button is not showing up in my screen, I’ve seen it before and tried to get to know it, but it no longer appears on my screen to the point where I forgot it was there!
After alerting me, I tried shrinking and lagging the screen Yes it is here but it stays invisible in full screen mode ! It only appears if I minimize it.
The important thing is that I’m sure it exists now :slightly_smiling_face: “I will use it in futur”
Thank you very much for your detailed answer @JeremyLT :ok_hand:
Naturally ! Professionals have the best answers :heart:


Yes, flexbox he handled it, thank you, but without flexbox, why CSS didn’t he treat the two elements of header the same way ?
I tried deleting the image element and the h1 element responded to the background I set, but when the two elements exist, it deals with one element, in this case the image element takes precedence ! anyway we are learning yet :slightly_smiling_face: good coding @shadhin

1 Like

The header has a fixed height, if the content doesn’t fit it will overflow it. The h1 is overflowing. Mainly because of its font-size and margin.

If you made it smaller you would see it was no longer overflowing its container.

h1 {
  margin: 0;
  font-size: 12px;
  color: white;

Flexbox makes it a flex item (not a block-level element) and puts the flex items on one line. You will still see an overflow if you make the screen small enough to where the h1 text wraps, i.e. the “Quiz” part of the text will overflow.

1 Like

that’s exactly what i did want to understand, the key word here is “overflow” , my old h1 have flowed, yes because font-size and margin default setting of elements, and that’s the role of CSS. your code forced the h1 to join him container. :slightly_smiling_face: Thank you @lasjorg for your nice explication :heart:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.