Nav bar overlaps the page and sticks out

Nav bar overlaps the page and sticks out
0

#1

When I set the nav bar position to fixed, it overlaps the page beneath it. How do I fix that?
Here’s the link https://codepen.io/Boss911/pen/BwNaKp


#2

It’s caused by the <h1>'s margin inside the pageOne <div>. Try setting its top margin to zero like

.pageOne h1 {
  margin-top: 0;
}

#3

I’ve just tried it. It still doesn’t work.


#4

Oh, I misunderstood what you meant. Now try adjusting the body’s top padding.

This is what it looks like when the body’s top padding is 50px


#5

The bar sticks out on the right still, no result.


#6
nav {left: 0;}

#7

Just applied it. Now the bar sticks out on the left too. How do I make it inline with the page beneath it?


#8

a fixed element doesn’t inherit the parent’s width anymore.
what you can do is wrap the <nav> inside a <div> and move the fixed position value,
or you may move the css property background of the current <nav> to its child

let’s try the latter:
-the <nav> should be 100%
-move the background to its child which is .nav
-now add some padding to <nav> to align the black background to the content

nav {left: 0; background: 0; padding: 0 15px;}
.nav {background: #222;}

if this doesn’t work…i give up