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.