User agent overriding attribute

Hello friends at FCC,
So I was trying out css grid layout on the following pen; https://codepen.io/chubibest/pen/ErKQzO. Where I set the height attribute on the container to 100%. However, upon inspection on chrome dev tools I realized it was being overridden by the user agent. This prevents my grid from scaling accordingly. Pls help.

typically something like this at the top of your code:

*{margin:0;
  padding:0;}

overrides any margins or padding the browser is adding. Will not affect any margins or padding you set.

1 Like

It is not being overwritten. It is 100%, but you have to ask yourself, 100% of what?

If you give the body a height say 800px just for testing, now go back and in the dev tools and change the percentage up and down you can see it grow and shrink in height. You probably want 100vh on the body, or you can just set that on the grid container itself instead of the 100%.

You can also control the total height by giving the grid rows a height, say the main content area. Again you can use vh (viewport height).

That worked just fine. Many Thanks.