Nav bar overlaps the page and sticks out

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

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;
}

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

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

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

nav {left: 0;}

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

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