Grid Container will not take up the full vh - css

Question

My Grid Container looks to be stuck inside of a "root" div when I inspect.
I'm wanting my middle row to take up all remaining height in the grid. Right now my grid is stuck to the top of the screen.
Here is my code:
*,
:root {
--dark: #12121f;
--dark-gray: #303133;
--light: #f7f8fc;
--accent: #380082;
--modal: #3949ab;
--sections: #1f85b4;
--text: #f5f5f5;
}
html {
height: 100%;
}
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
margin: 0;
}
code {
font-family: "Montserrat", source-code-pro, Menlo, Monaco, Consolas,
"Courier New", monospace;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--dark-gray);
color: var(--white);
}
.grid-container {
height: 100%;
margin: 20px;
display: grid;
grid-gap: 8px;
grid-template-columns: [main-start] 1fr [content-start] 5fr [content-end main-end];
grid-template-rows: [main-start] 100px [content-start] auto [content-end] 100px [main-end];
align-content: center;
justify-content: center;
border: purple 1px solid;
}
.header-grid {
grid-column: main;
font-size: 3rem;
text-align: center;
font-family: "Montserrat";
font-weight: bold;
text-shadow: 0px 4px 4px rgba(122, 123, 126, 0.45);
background: white;
}
.menu-grid {
background: white;
padding: 20px;
text-align: center;
align-content: center;
padding-top: 50px;
padding-bottom: 30px ;
}
.about-grid {
grid-area: content;
justify-content: center;
background: white;
padding: 20px;
}
.email-grid {
grid-column: main;
display: flex;
justify-content: space-around;
background: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
and here is my react component:
import React from "react";
const Contact = () => {
document.title = "Contact";
return (
<>
<div className="grid-container">
<div className="header-grid">The WholeSale Group</div>
<div className="menu-grid">
<ul>
<li>HOME</li>
<li>ORDERS</li>
<li>INVENTORY</li>
<li>STATEMENTS</li>
</ul>
</div>
<div className="about-grid">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur,
ut corporis. Voluptates quas, magni quisquam possimus id quam
cupiditate odio distinctio similique, atque fugit consequuntur
aperiam esse nihil voluptatum neque. Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Pariatur, ut corporis. Voluptates
quas, magni quisquam possimus id quam cupiditate odio distinctio
similique, atque fugit consequuntur aperiam esse nihil voluptatum
neque.
</p>
</div>
<div className="email-grid">
<p>Sales: email#email.com</p>
<p>Support: email#email.com</p>
<p>Upline: email#email.com</p>
</div>
</div>
</>
);
};
export default Contact;
// TP-43
Here is a screenshot of my grid under inspection
Thanks in advance for any help!
I've tried setting root to 100% or 100vh and have also tried both options on html and body as well.
If I change the last value in my grid template rows to something like 700px; it stretches the whole view height. Likewise, if I change my content (middle) row value to the same, it stretches down further.
I put "auto" there so it would take up all remaining height of the page.
I also tried min-content with no luck.