Grid issues help

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

Like this?
https://codepen.io/hbar1st/pen/zJKvZB?editors=1100

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?
https://codepen.io/hbar1st/pen/zJKvZB?editors=1100

1 Like

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)

1 Like