Help positioning

1


This is a check i’m doing because I have a lot of problems with this.
I want to make a nav bar with its position fixed on top, and below the next section.
Question 1
why it doesn’t have margin on the right?
Question2
why when I give margin-top to the section 1 it affects to the “fixed” id?
Question3
what is the usual way to do this?

2

Hello!

  1. That’s because the width of the element is not taking into account all the modified spaces. You could define: width: calc(100% - 12), where the - 12 are the 5 pixels of margin on left and right sides of the body and the 1 pixel width of the border of the fixed element. Remember that an element total width includes the margin, padding and border, which may overflow the width of the screen.
  2. I’m not sure what you mean with this, but whenever you position an element as absolute or fixed, it’s removed from the current flow and lay out differently, unless the parent has a position other than the default. Take a look at what the documentation says about the CSS position.
  3. What you did is correct, it’s just one way of doing it. Another way may be using position: sticky, but I’ll let you try it :stuck_out_tongue:.