Nested CSS Grid (strange behaviour)

Hi I have been through your courses on HTML5 and CSS, and as advised have been playing around with some of the items covered.

I have been playing with CSS grid and have come across a problem. I’ve pastes the HTML and CSS files content below.

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. And should I use it?

Title Banner

Main banner text

Services

Main services text

Why Us

Main Why us text

Who are we

Main who are we text

/* Step 1: create a SUB GRID to hold the main elements*/
.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;
}

ok, my bad forgot to nest the p tags in the select tag.