CSS Gridlayout Child not adhering to grid-template

I am trying to create a data input page using CSS gridlayout where the content-section grid has a top section containing the inputs and a bottom section containing the data results already in the database. The top section is divided into two grid columns. But when I add my inputs the top section does not adhere to the grid-template-columns or grid-template-rows values.

I added a coloured border to each of the grids to see which grids are not following the CSS class attributes. As clearly can be seen from my code snippet the section-top (yellow border) and its col1 (green border) along with col2 (green border) children is not following the set attributes.
The section-top should only be 40% its parent the content-section (red border) and the children col1 along with col2 must display as two evenly sized columns within the top section.

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    background-color: #3399FF;
    font-size: 1rem;
    font-weight: 400;
    color: #858796;
}
.main-grid-data-section {
    display: grid;
    grid-template-columns: 1fr 80% 1fr;
    grid-template-rows: auto auto auto 85% auto;
    grid-template-areas: 
    "title title title"
    "smaller-header smaller-header smaller-header"
    "sidebar sidebar sidebar"
    ". content-section ."
    "footer footer footer";
    grid-gap: 1px;
    height: calc(100vh - 100px);
}
.smaller-header {
    grid-area: smaller-header;
}
.content-section {
    grid-area: content-section;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 40% auto;
    grid-template-areas: 
    "section-top"
    "section-bottom";
    border-style: solid;
    border-color: rgb(255, 51, 51);
}
.section-top {
    grid-area: section-top;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "col1 col2";
    align-self: start;
    margin: 0;
    padding: 0;
    border-style: solid;
    border-color: rgb(252, 255, 51);
}

.section-bottom {
	grid-area: section-bottom;
	margin: 0;
	padding: 2px;
	border-style: solid;
	border-color: rgb(255, 160, 51);
}
.col1 {
	grid-area: col1;
	margin: 0;
	padding: 0;
	border-style: solid;
	border-color: rgb(58, 255, 51);
}
.col2 {
	grid-area: col2;
	margin: 0;
	padding: 0;
	border-style: solid;
	border-color: rgb(58, 255, 51);
}
.footer {
    grid-area: footer;
    display: grid;
    grid-template-columns: 1fr 30% 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "login-footer-grid login-footer-grid login-footer-grid"
}

<!DOCTYPE html>
<html lang="en">
    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="./css/test.css">
    </head>
<body>
<!-- Main grid layout -->
<div class="main-grid-data-section">
    <div class="title">
    </div>
    <div class="smaller-header">
    </div>
    <div class="sidebar">
    </div>
    <!-- Content data grid -->
    <div class="content-section">
        <!-- Data input section -->
        <div class="section-top">
            <form id="grading" class="form-container">
                <div class="col1">
                    <input type="text" placeholder="Document number" id="docnumber" name="docnumber">
                    <input type="number" placeholder="Bruto waarde" id="gross" name="gross">
                    <input type="number" placeholder="Bin hoeveelheid" id="cnt" name="cnt">
                    <input type="number" placeholder="Bin gewig" id="bin" name="bin">
                </div>
                <div class="col2">
                    <input type="number" id="cj" name="cj">
                    <input type="number" id="cb" name="cb">
                    <input type="number" id="cm" name="cm">
                    <input type="number" id="sj" name="sj">
                    <input type="number" id="sb" name="sb">
                    <input type="number" id="sm" name="sm">
                    <input type="number" id="ind" name="ind">
                    <input type="number" id="nv" name="nv">
                    <input type="number" id="moist" name="moist">
                </div>
            </form>
        </div>
        <!-- Data show section -->
        <div class="section-bottom">
            <div></div>
        </div>
    </div>
    <div class="footer">
        <!--Footer-->
    </div>
</div>
</body>
</html>

I tried removing the children template-areas attribute and setting the columns as template-columns only, it did not work.
Can someone please point out to me what attribute or property is causing this problem?

Solution

In your question, you say

As clearly can be seen from my code snippet the section-top (yellow border) and its col1 (green border) along with col2 (green border) children is not following the set attributes.

But col1 and col2 are not children of section top, they are grand-children of it.

You can set the style that you are applying to section-top to the form grading, and then the grid styles will work