# Html5 and css3 grids

**URL:** <https://forum.codewithmosh.com/t/html5-and-css3-grids/2289>\
**Category:** HTML/CSS\
**Created:** [January 27, 2021, 6:52am UTC](https://forum.codewithmosh.com/t/html5-and-css3-grids/2289 "2021-01-27T06:52:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dominique123](https://avatars.discourse-cdn.com/v4/letter/d/71c47a/32.png) [@Dominique123](https://forum.codewithmosh.com/u/Dominique123)\
**Post date:** [January 27, 2021, 6:52am UTC](https://forum.codewithmosh.com/t/html5-and-css3-grids/2289/1 "2021-01-27T06:52:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![SAM](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/sam/32/167_2.png) [@SAM](https://forum.codewithmosh.com/u/SAM)\
**Post date:** [January 31, 2021, 11:59am UTC](https://forum.codewithmosh.com/t/html5-and-css3-grids/2289/2 "2021-01-31T11:59:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Dominique123](https://avatars.discourse-cdn.com/v4/letter/d/71c47a/32.png) [@Dominique123](https://forum.codewithmosh.com/u/Dominique123)\
**Post date:** [February 7, 2021, 3:17pm UTC](https://forum.codewithmosh.com/t/html5-and-css3-grids/2289/3 "2021-02-07T15:17:33Z")

</div>

Thanks a lot Sam. That was helpful. I appreciate

---

<div class="post-metadata">

**Author:** ![ViL](https://avatars.discourse-cdn.com/v4/letter/v/e5b9ba/32.png) [@ViL](https://forum.codewithmosh.com/u/ViL)\
**Post date:** [February 21, 2021, 9:20am UTC](https://forum.codewithmosh.com/t/html5-and-css3-grids/2289/4 "2021-02-21T09:20:38Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ItsAdyx](https://avatars.discourse-cdn.com/v4/letter/i/ebca7d/32.png) [@ItsAdyx](https://forum.codewithmosh.com/u/ItsAdyx)\
**Post date:** [July 7, 2021, 2:00pm UTC](https://forum.codewithmosh.com/t/html5-and-css3-grids/2289/5 "2021-07-07T14:00:15Z")

</div>

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).
