[solved] Header cut off from page when resizing, what is wrong?


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.

1 Like

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