codesandbox attached. I had to fork a piece from my other code to get the current behaviour: https://codesandbox.io/s/compassionate-leavitt-cssformatting-p10w5

I'm learning how to properly utilize CSS files in my reactJS project, as I'm trying to utilize the full view port in components, to make the page content scale with page size. At the moment, I've got a problem of the viewport for Body, not restricting my other components from using that viewport as a base.

CSS file is pretty simple:

Use body at 100%, and if there is 1 grid, use 100% of the viewport, if 2, half a viewport each.

In index.js, I'm importing the css via import "../cssfile.css" same in the component that generates the grids. There is a bit of layering, as different components generate inside others, and the one that generates the grids, is, eventually, the one that generates the very bottom of the structure. Here is how the body displays:

then here is the components display. Notice the top components are offset, and only the grids have the viewport scaling applied to them.

Do I need to apply the CSS differently somehow, or parent the elements to body somehow for it to utilize the body/html 100% height size?