Grid -CSS- issue

I´m having serious issues trying to get this grid resolved. Three rows, 2 cols for a total of 6 divs. It´s supposed to be displayed just fine: Please red the comments. I would really appreciate your help. Below you see the HTML and CSS styles.

<div class="container">
      <section id="features">
        <div class="grid">
          <div class="icon1">
            <i class="fa fa-3x fa-fire"></i>
          </div>
          <div class="content2">
            <h2>Premium Materials</h2>
            <p>
              Our trombones use the shiniest brass which is sourced locally.
              This will increase the longevity of your purchase.
            </p>
          </div>
        </div>
        <div class="grid">
          <div class="icon3">
            <i class="fa fa-3x fa-truck"></i>
          </div>
          <div class="content4">
            <h2>Fast Shipping</h2>
            <p>
              We make sure you recieve your trombone as soon as we have finished
              making it. We also provide free returns if <br />
              you are not satisfied.
            </p>
          </div>
        </div>
        <div class="grid">
          <div class="icon5">
            <i class="fa fa-3x fa-battery-full"></i>
          </div>
          <div class="content6">
            <h2>Quality Assurance</h2>
            <p>
              For every purchase you make, we will ensure there are no damages
              or faults and we will check and test the pitch of <br />
              your instrument.
            </p>
          </div>
        </div>
      </section>
    </div>

Now, the styles. (I have not completed it as I noticed nothing was happening with what I have written).

#features {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 125px 125px 125px;
    grid-template-areas: "header start"
    "advert mid" 
    "footer end";
}

.icon1 {
    grid-area: "header";
    grid-row-start: 1;
    grid-row-end: 2;
    justify-self: center;
}
.content2 {
    grid-area: "start"; 
    grid-column-start: 2;
    grid-column-end: 3;
    align-self: start;
}
.icon3 {
    grid-area: "advert";
    grid-row-start: 2;
    grid-row-end: 3;
    justify-self: center;
    
}

hi @Gustav0

if only you can share your code link, so we can inspect the element, maybe we can help more.

for what i saw, that your icon1 conten2 and icon3 they are not the childs of #features. try remove all the div class="grid".

regards

Did not see this comment before, sorry. It has been resolved and indeed that was the main issue… Appreciate it""