Why does the content overlapping when i make position fixed?

Hi ,
I work on a freeCodeCamp project all is done but i couldn’t make the header fixed. When I make position: fixed everyting is overlapping? Please help me.
Here is the codepen link:


You can use flex for better layout positioning.

    margin: 20px;
  position: fixed;
  display: flex;
  justify-content: space-between;
  width: 100%;

  display: flex;

main {
  padding-top: 70px;

It should fixed it.

1 Like

Thank you very much. Any resource for me to comprehend display:flex well?


This is the resource usefull to learn Flex:
MDN Docs:
Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN (mozilla.org)

Very useful to learn more about Flex: A Complete Guide to Flexbox | CSS-Tricks (css-tricks.com)

A game to master Flex: Flexbox Defense

1 Like