Html5 and css3 grids

I was coding along with Mosh and I encountered an issue in the HTML/CSS course part 2, Layout section and Grids lesson.
After typing in the same code in VScode, I noticed that my grids were not separated by any margin whereas Mosh’s were.
I tried adding a margin to the boxes and I am getting a totally different thing. Did anyone stumble into this issue? If yes how did you solve it?
I need your help.

The white space between the yellow boxes is not a margin. It’s there because the yellow boxes are smaller than the grid cells.

Mosh gives the grid cells absolute sizes of 100 pixels and the boxes a width and height of 5rem which by default leads to a 80x80 pixels size. If you don’t see the resulting 20px white space I’d say either your code or your root font size is different.

1 Like

Thanks a lot Sam. That was helpful. I appreciate

Am new to programming. I am having this problem as well. How do I change the default settings and make the box stretch to the grid size?

To whomever encounters this problem.
To solve this issue be sure you use Google Chrome and change your font size in Google Chrome settings to Medium(Recommended).