Responsive Web Design Project - Product Landing Page Navbar at top of page

Hi, I’m working on my Product Landing Page Project and I am only unable to fulfill the user story:

User Story #13: The navbar should always be at the top of the viewport.

Here is a pen of my code:

https://codepen.io/redfresne/pen/zYOBRdL

it appears to be located at the top of the page. I have attempted to use the clear: both CSS rule to fix the problem, but no luck. What am I doing wrong?

I believe it wants the navbar to always be on top of the screen, even when you scroll down the page. So try having a fixed position on your navbar itself, and that should solve that issue :slight_smile:

This worked. But now my nav-links are off to the left. I’ve attempted to get rid of the float: right; rule, but that does not work. How do I keep the nav-links on the right?

With that you can also set the nav itself to display flex, and then use the flex property to where you can push the content to the right end of it’s container.

But then I see another issue as well where the nav bar doesn’t fully extend 100% of the width of the screen, you can see this by setting a background color of the navbar. And the issue that is causing this is the header container that the nav is sitting in, so also look into the width of the nav parent container.