H!
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.
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).
