Navigation items flowing off the page with fixed position header


I am doing FCC and i am at the third project for responsive design certification.
I ran into a problem with the navigation items flowing of the page with a fixed position header.

Here is the codepen link:

Might someone know how to make the navigation list items stay on the page?

Thanks in advance. :slight_smile:

I edited your link for you.

What you’re seeing is exactly how fixed positioning is intended to work. It’s fixed in place. You can use flexbox to easily position your elements on the right of the navbar.

Could you give me a hint to which ID or class to add the display: flex;
because i already added it to a bunch of places

Yeah, some of those you don’t need, but it’s no harm. If you remove the position: fixed rule, your navbar works quite well.

But i actually would like to keep my header with the navigation fixed so that it stays when i scroll down

Oh yeah, that makes a lot of sense. Try adding width: 100% to your #header rules.

1 Like

that did not seem to work

actually the example from FCC has it like i want it: ttps://
but i do not seem to be able to see why it works there. (add h to link)

You need to end each rule with a semicolon, my dude.


1 Like

Wow, that is embarrasing of course, knew that but was to fast i guess

Thanks a lot fellow coder :slight_smile: i owe you one

1 Like