Landing Page - Fixed nav & flexbox


I’m running into a few problems with my solution for the Landing Page challenge. You can find the code so far on this codepen

  1. To prevent the page title from sliding under the fixed header, I gave the main div a top margin of 50px. Strangely enough, it pushes everything down although the main div is a child of the top level div container, which holds the header, main, and footer divs. I would expect the container to stay at the top, the fixed header too, and then the main div only to start 50px from the top.

  2. The moment I made the header div fixed, it lost its block attribute, hence it’s width attribute. However, in order to align my nav links right, I need it to have a certain width, preferable the full width of its container. But when I give it a width of 100%, it stretches out of the container. Probably because it now no longer has a container. The same with 100vw. Is there a way to specify its width without using something like 999px?

Thanks a lot,

I found a solution. You can make the navbar 100% width. The reason it goes farther than the viewport is because the image and video you uploaded. They are imported with the width of 1000 px which takes up more than the viewport. Set them to 100% instead. See my fork where I fixed the problem

Thanks a lot for your suggestion. Unfortunately, also in your pen the header div goes out of the parent container, as you can tell from the border hiding behind it when scrolling up.

The border hides behind the header because the header is fixed, and not relative to the parent element. You could put a border around the header itself If you wanted to. But because it is fixed It does not inherit the border from the parent even though it is still within the container div. I would advise actually bringing the header div out of the parent and set the body margin to 0. That would bake the header look better by spanning the whole viewport. Then you can ad margin to the containter and still have the shadow around the main content. See the changes I made to the fork.

Hope that helps!

Hey check if this is what you want. I just tried. Just forked it. I tweaked a little of your code.

Thanks a lot for all your advice. In the end I went with what the both of you suggested, to make the header full width and get it out of the container. You can see the result in the pen which I shared earlier. Thanks again.