Why my nav elements are not in line?


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?



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


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

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

Thanks it finally worked!!

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

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.

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