Nested CSS grid acting strangely - html

Question

If you look at the nested grid in Firefox and look at the grid display you will see the four separate nested grids each with 1 row and 12 columns. However, if you look at the CSS file you can only assign the element "main-services-text", "main-banner-text", etc., by treating it as a single 4 row grid.
So my question is, is this the way it should work or is it a bug. Also should I use it?
.main-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 100px 100px 100px 100px;
}
/* Step 1a assign the main elements "" to the MAIN Grid*/
.main-banner {
grid-column: 1 /13;
grid-row: 1 / 2;
background-color: cornflowerblue;
}
.main-services {
grid-column: 1 /13;
grid-row: 2 / 3;
background-color: lightcyan;
}
.main-why-us {
grid-column: 1 /13;
grid-row: 3 / 4;
background-color: orange;
}
.main-who-are-we {
grid-column: 1 /13;
grid-row: 4 / 5;
background-color: chocolate;
}
/* Step 2: Set up individual nested GRIDS*/
main section {
display: grid;
color: olive;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 100px;
}
/* Step 2 assign elements to the nested grids */
.main-banner-text {
grid-column: 3 / 5;
grid-row: 1 / 2;
}
.main-services-text {
grid-column: 6 / 9;
grid-row: 2 / 3;
}
.main-why-us-text {
grid-column: 10 / 13;
grid-row: 3 / 4;
}
.main-who-are-we-text {
grid-column: 9 / 10;
grid-row: 4 / 5;
}
<main class="main-grid">
<section class="main-banner">Banner</section>
<p class="main-banner-text">Main banner text</p>
<section class="main-services">Services</section>
<p class="main-services-text">Main services text</p>
<section class="main-why-us">Why Us</section>
<p class="main-why-us-text">Main Why us text</p>
<section class="main-who-are-we">Who are we</section>
<p class="main-who-are-we-text">Main who are we text</p>
</main>