Grid and Media queries on Tech Doc Page - feedback / questions

Hello all, I’ve been a member here since the beginning and recently caught up on some new stuff like CSS Grid. The Technical Documentation project was added after I did the front end so I thought I’d Try combining them.

I’m having trouble rectifying both the grid and a media query. I can do one or the other.

The intention is to use a default single column, and then create a 2 column grid for screens 800px or wider.

Weird thing is that I thought I had it when I misspelled “content” for the grid-area for the main doc, but when I corrected the typo, now they overlap.

I’d appreciate any input. I recognize there are many ways to solve a problem, but I want to see what’s going wrong here.

As a side note, I also have a question about how I’ve structured the nav links in the left column using :clear and :float, which then requires me to use :clear for the main-content on narrow screens.

Would have loved to help but I haven’t reached that level yet

You could possibly try watching the help vid

I fixed it!

The initial grid had been defined in body, but in my media query I defined it in main-doc so it was all messed up, yet doing exactly what I told it to, lol.