Nav centering issues on smaller laptop screens

[kosicookie (Kosi)]

When the screen is set to 1516px, the navbar links are centered perfectly. However, on smaller screen sizes like 1024px, the nav links aren’t centered at all; there’s so much space at the bottom. Whenever I try to fix this, it messes up with the centering on larger screens. How do I fix this?

Thanks

Read-only link: https://preview.webflow.com/preview/kosi-ux?utm_medium=preview_link&utm_source=designer&utm_content=kosi-ux&preview=1639b7c3d09debaf555f06fe491ea40f&workflow=preview

[imtiazraqib]

Hey @kosicookie, this can be fixed with a quick restructuring of your content and using the beauty flex-box.

1. All the nav elements within the navbar container, such as Menu Button, Brand and Nav Menu, move it out and delete the empty navbar container

2. Add a new div and call it nav-container and throw in the elements in: Menu Button, Brand and Nav Menu. Your structure should look as such:
   

   

3. With the nav-container selected, set display: flex-box, align-items: center and justify-content: space-between as shown below:
   

After all this, you will have a consistent centering with your elements at all screen sizes.

At 1516px

At 1024px

Hope this helps!

[kosicookie (Kosi)]

It worked! Thank you so much, I really appreciate it!!!

[imtiazraqib]

I am glad it worked out for you!