Why does the content overlapping when i make position fixed?

HTML-CSS
#1

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:
https://codepen.io/erdlddncr/pen/XWjPmmm

#2

Hi,

You can use flex for better layout positioning.

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

nav{
  display: flex;
}

main {
  padding-top: 70px;
}

It should fixed it.

1 Like
#3

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

#4

Hi,

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