Disobedient nav-bar on my Product Page

1

Hallo.

My product landing page is passing all criteria, but I’m not happy with the behaviour of the nav bar links and would like to understand why it’s not working.

https://codepen.io/JDarke/pen/ZdwWGr

At the moment, when the page loads, the links are crammed close together.

If you then shrink the screen size until the media queries take effect, the nav bar re-orients to a column. If you then re-grow the screen, the nav links are back in a row, but now have space between them.

I know I could just move on to the next project, but this is driving me crazy!

How do I make the nav bar & links appear spaced out correctly when the page loads?

Thanks!

2

Hi @JDarke, try moving padding-right: 20px; under the nav from media query to the main section

3

No luck. :confused:

I think I might just tear out the nav bar and try rebuilding it from scratch again.