Help with navbar - challenge

[Beso11]

Hi there
I want some help with my challenge , I have been complete all the requirements

but I have a problem with The navbar when I try but it at the top of the viewport.
it Overlap with the content below it and I don’t know how to fix it

here is my code

https://codepen.io/beso-almatboli/pen/VwmmaRj

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

freeCodeCamp.org

[charaf_marghin]

you did a bad practice on all the header … before creating the content try to style the header in a correct styling … the first mistake is that you set the position of the header to fixed and you are trying to push down the features content using the margin-bottom and padding bottom … that’s wont work cuz when you set the element to fixed position , the element loses its default flow so other elements will take its place … you can add a simple lines to your code to skip your current problem

header{
   width: 100%;
   max-height: 3em; /* just for example */
   z-index: 100; /*to be above all the content*/
   background: #fff; /* you missed the background so the content
                      will appear in the header when you 
                      scroll down */
}
#features{
   padding-top:  5em /*3em is the max-height of the header
                        and 2em for a space between featurs and the header */

in this case the content wont be overlap with the header …
you have another mistake in styling the header layout … and you can see the navbar will be disappear when you resize the with of the browser window … i think it’s better to style the header with flex-box or grid …
I suggest you to review the positions courses to better understand how they works … I’m sorry if you didn’t understand my horrible language XD
good luck

note :
you can develop your skills by reading people’s projects and codes and trying to understand how it works and whynot try to adjust it for better … this is my landing page project https://codepen.io/CH4R4F/pen/WNGVjvZ you can check the header and how the flex box style its content

[Beso11]

Thank you