Grid issues help

Grid issues help
0

#1

@media for the desktop
grid not taking up entire width of page

and

huge gap under header
and another above footer

I want the layout to look something like this:

“header header header header header”
“nav nav nav nav nav”
“content content . section section”
“content content . section section”
“footer footer footer footer footer”;


#2

Like this?


#3

That still has space under the header
and the empty space “.” in the grid layout I want to be centered in the middle of screen
and the section to be the same fraction as the content


#4

like this?


#5

Yes that would be it! What exactly was wrong ?


#6

if you look at the css code in the codepen, see all the lines I commented out, that should give you an idea.
Also the line for grid-template-columns was only defining 3 columns instead of 5 in the media section.
(so I mostly commented stuff out but I also added a body section that sets padding and margin to 0 , just in case that was affecting anything)