Content is overlapping my nav bar

Hi there!
I am on the Product Landing Page challenge and the content of the page is overlapping my nav bar. By the way, why FCC ask us to create the nav inside a header?

Here is the code(it is not finished yet): code

Because its position is fixed. Fixed position removes an element from the normal flow of the page. It seems okay for the wider resolution devices though.

You can use media rules to fix its position in lower resolution devices.