For the first paragraph: Put your outermost container as { box-sizing: border-box; width: 100vw; height: 100vh; overflow: none;

For the first paragraph: Put your outermost container as { box-sizing: border-box; width: 100vw; height: 100vh; overflow: none; } vw/vh are units based on the viewport width and height. 1vw is 1% of the viewport interior width, 1vh is the same for height. The border box box model ensures that padding and borders subtract from the interior dimensions rather than add to the exterior dimensions. You may also want to use <meta viewport> to control zooming on mobile devices: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m... Then you can use grid to divvy up that internal space without having to deal with the kind of rounding issues that using ems or %s used to have