I've (almost) completed my 3rd project — a Product Landing Page

There’s one question I have. How can I fix my header to the top without messing up it’s structure? Maybe there’s something I can do with JavaScript to solve this.

Oh, and I’ve just checked the page on my mobile, and the video doesn’t show correctly. It’s still playable, but there’s something wrong.

You don’t need to use any JavaScript for the fixed header. You can find an example of how to implement the fixed header on the W3Schools website. Just make sure to set top and width properties to the header as well (besides position: fixed).

After you create the fixed header you will notice that the header will cover over your form. You can easily fix this by adding some margins.

Thank you, now it works fine!

There’s the strange issue when I open the page in Google Chrome. I use mozilla when writing code, and nav in the footer uses display: flex; and justify-content: end; to move list items to the right of the container. But in Google Chrome the list acts as justify-content: start;, so the items are still on the left side.

You need to use flex-end and not just end so that it works properly in both Chrome and Firefox. Apparently Chrome doesn’t understand it if you just use end.

See this stackoverflow answer for more info.