Aligning items horizontally in flexbox navbar

Hello,

I’m trying to build a product landing page for the FCC project. I want to make the navigation bar responsive using Flexbox but I don’t know how to align the items horizontally and to make them clickable for the whole width.

I checked many topics and tutorials before and most of them say that applying display: flex; to the main container does it automatically. I tried different code and the only way I could align them horizontally was using CSS Grid. I don’t know what I’m doing wrong since my title element is automatically aligned with Flexbox (the icon and the h1), but not the navbar.

Here’s the link: https://codepen.io/aitormorgado/pen/MWayXPy

As you can see, right now, the three elements of the navigational bar are in a column. I want to align them horizontally and expand them to the whole width of the container so you can click on them even if you are not pointing the cursor to the text.

Can you help me? Thank you very much.

first you have to make ul inside nav as a flex

nav ul {
display: flex;
}

1 Like

As it’s been said, display: flex is to be given to the parent element where all the elements that need to be aligned are. In the code, display: flex has been given to #nav-bar and inside of that element there’s only one single element, ul. And since there’s nothing for it to align with, no changes are seen.

1 Like