Why my nav elements are not in line?

HTML-CSS
1

Hi,

Quick help needed!

I have been trying to solve this for a couple of hours but couldn’t.

Why are my nav elements not in a row instead of a column?

Thanks

https://codepen.io/augustin16/pen/YzZNwNV

2

You could add some CSS to display the <li> elements inline

https://www.w3schools.com/css/css_navbar_horizontal.asp

and perhaps make a class for that so it won’t affect other <li> tags if you need to use them somewhere else in the page. By default <li> are block elements, not inline elements.

1 Like
3

Setting #navbar to display: flex is not going to affect the li elements inside the ul.

The flexbox container will only affect its direct children, not the grandchildren. You have to make the ul a flexbox container.

1 Like
4

Thanks it finally worked!!

5

And Could you tell me why the orange color is winning on the navbar blue color please? I don’t understand this neither

6

You have the other color on the * selector. I wouldn’t suggest doing that. Put it as the background-color on the body instead.

BTW, you have to move your max-width media query after the styles it is supposed to overwrite.

7

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