Would anyone be so kind to let me know why my header
<ul> part is being cut off from screen when I resize it. For small screens the code is doing ok and wraps and goes ok into
flex-direction: column;, but before small screen sizes hit, the nav elements get cut off, can’t figure out why.
Please see image.
Would love a second pair of eyes.
Thanks in advance.
Remove the width on the .logo, then give the header width: 100%; to make the justify-content: space-around; work properly. You may also find the padding on the header can cause some overflow.
Super thanks @lasjorg. Making the head 100% was key. Also true with the padding on the header, that was causing overflow as well.
I however had to keep the width on .logo in order to make the row design workout (given I had a specific width for
<ul> (otherwise my nav links were positioned in the middle of the screen).