Css grid navbar overlap help

HTML-CSS
1

I’ve searched all day and can’t figure this out. my navbar isn’t fully at the top of the screen and also it covers up the content when using the links. Usually i just add padding-top to the body to compensate for the navbar, but was trying to do this all in css grid and it doesn’t work because the navbar also gets the padding.
maybe having the navbar in the grid wont work? I’m not sure and just looking for help/feedback to figure out what to do.

also, any idea why only the last picture (the technical documentation link) isn’t centered?

2

There is actually some margin baked into body so you’ll have to override that style to remove it

That padding-top is still needed. Try to put it on whatever content follows the fixed navbar

You’ll have to trick the browser here. If for example your navbar is 60px high then

.project-title{
  padding-top:60px;
  margin-top:-60px;
}

I’ve been struggling with layout some lately too and have been doing little studies in codepen. I have not done any in grid though

3

In css add this

body{
margin:0;
padding:0;
}

4

Thanks a bunch for the help guys! I’m gonna be grinding out the fixes and making this thing look pretty the rest of the night.