Grid issues help

Grid issues help


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


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


Like this?


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


like this?


Yes that would be it! What exactly was wrong ?


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)