CSS / Flex Overlap Question

Hi there, I am working to create my first website and am having trouble with some CSS style – it’s really like that Family Guy gif! I created a codepen here to help communicate the overlap issues I’m seeing.

I’m trying to separate my header (which includes a text logo and nav bar) via flex and have everything spaced accordingly. Instead flex is not respecting the logo and overlapping with the entire 100% width of the page (instead of the 100% that it is allocated by the header).

Can someone please help?! Would mean a ton as I’m going crazy here!

The issue is caused by position:fixed which removes nav element out of the normal workflow of page.

Position:fixed and position:absolute cause the rest of the elements in html file to literally ignore existence of the element selected with these css stylings.

I will try to provide a solution with a fixed nav-bar because I assume you do want it fixed at the top of the page, but just so you know in the meantime what is causing it.

Edit: I have thought about it for some time, and I believe there is no other thing than set manually the positioning of the nav element. Since u made it fixed, I would add something like left: 20%; width: 80%; in the css selector of nav element. If someone can correct me, do so!

1 Like

thanks for the help. that looks like it works.