Fitting layout vertically and horizontally without scrolling/overflow - css

Question

I'm attempting to create a layout where the app takes up 100% of the vertical and horizontal space without any overflow.
Instead this is what it looks like:
https://stoic-snyder-620f18.netlify.app/
Here's the code. Any idea what could be causing all the divs to be larger than they should be? I've been stuck on this for hours, no idea what to do.
import React, { useState } from "react"
import styled, { createGlobalStyle } from "styled-components"
import { Link } from "gatsby"
import logo_image from "../../static/logo_white_trans.png"
import fb_icon_image from "../../static/fb_icon.png"
import ig_icon_image from "../../static/ig_icon.png"
import yt_icon_image from "../../static/yt_icon.png"
const Global = createGlobalStyle`
* {
margin: 0;
padding: 0;
border: 0;
}
body, html {
height: 100%;
}
`
const Layout = () => {
const [nav, showNav] = useState(false)
return (
<div id='app' style={{ height: '100vh', backgroundColor: 'pink', display: 'grid', gridTemplateRows: '15% 70% 15%' }}>
<Global />
<div id='header' style={{ height: '100%', backgroundColor: 'blue', display: 'grid', gridTemplateColumns: '20% 60% 20%' }}>
<div id='logo' style={{ width: '100%', backgroundColor: 'orange' }} >
<img src={logo_image} />
</div>
<div id='title' style={{ width: '100%', backgroundColor: 'lime' }}>
Title
</div>
<div id='menu' style={{ width: '100%', backgroundColor: 'coral' }}>
</div>
</div>
<div id='content' style={{ height: '100%', backgroundColor: 'teal' }}>
</div>
<div id='footer' style={{ height: '100%', backgroundColor: 'grey', textAlign: 'center', marginTop: '0.25rem', marginBottom: '0.25rem' }}>
<img src={fb_icon_image} style={{ height: '90%', display: 'inline-block' }} />
<img src={ig_icon_image} style={{ height: '90%', display: 'inline-block', marginLeft: '1rem', marginRight: '1rem' }} />
<img src={yt_icon_image} style={{ height: '90%', display: 'inline-block' }} />
</div>
</div>
)
}
export default Layout