Div element overlapping grid columns

This is an age old question. I know many people have had issues with divs overlapping other divs. I read a ton of topics about it on Stack, but I can’t find anything that relates to my code.
I have a page layout which uses css grid for some of my elements. The problem is that I have a div underneath my grid elements containing an image with some text, which overlaps them when I scale down the screen.
Like this:

I tried adding “Display: block” to the div, but it didn’t work.
Could someone help me out?

Here is the code, The div causing the problem is called “container__about”

HTML

<div class="container__main">

    <header>

            <div class="container__hero">

                <img class="container__hero__image" src="../assets/hero-background.jpg">

                <div class="container__hero__text">

                <div class="container__hero__h1"><h1>Your Digital Handyman</h1></div>

                <div class="container__hero__p"><p>Digital products with human insight</p></div>

                <button class="btn">Hire me</button>

                </div>

            </div>

    </header>

    <div class="container__card">

      <div class="container__card__item">

        <div class="container__card__image">

        </div>

        <div class="container__card__text">

            <span class="container__card__text__upperTitle">

                CSS / JavaScript

            </span>

            <h2>Train Project</h2>

            <p>A customer page I made for a fictional

              Metro company to showcase the use of ES6 Javascript. </p>

          </div>

          <div class="container__card__footer">

            <i class="fas fa-location-arrow fa-3x"></i>

          </div>

      </div>

      <div class="container__card__item">

        <div class="container__card__image">

        </div>

        <div class="container__card__text">

            <span class="container__card__text__upperTitle">

                CSS / JavaScript

            </span>

            <h2>Train Project</h2>

            <p>A customer page I made for a fictional

              Metro company to showcase the use of ES6 Javascript. </p>

          </div>

          <div class="container__card__footer">

            <i class="fas fa-location-arrow fa-3x"></i>

          </div>

      </div>

      <div class="container__card__item">

        <div class="container__card__image">

        </div>

        <div class="container__card__text">

            <span class="container__card__text__upperTitle">

                CSS / JavaScript

            </span>

            <h2>Train Project</h2>

            <p>A customer page I made for a fictional

              Metro company to showcase the use of ES6 Javascript. </p>

          </div>

          <div class="container__card__footer">

            <i class="fas fa-location-arrow fa-3x"></i>

          </div>

      </div>

     </div>

    <div class="container__about">

                <img class="container__about__image" src="../assets/casual-cellphones-chatting.jpg">

                <div class="container__about__text">

                <div class="container__about__p"><p><p>The psychology <br> behind user <br> experience</p></p></div>

      </div>

    </div>

    </div>

SCSS

.container__hero{

  position: relative;

.container__hero__image {

    height: 100%;

    width: 100%

}

.container__hero__text {

  position: absolute;

  top: 40%;

  left: 50%;

  transform: translate(-50%, -50%);

.container__hero__h1 {

  font-size: 1.5em;

  color: white;

  text-align: center;

}

.container__hero__p {

  font-size: 1.4em;

  color: white;

  text-align: center;

}

.btn {

  position: absolute;

  background-color: $primary-color;

  left: 33%;

  border: none;

  color: white;

  padding: 15px 32px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

  margin: 4px 2px;

  cursor: pointer;

}

}

}

.container__card {

    height: 100vh;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));

    align-items: center;

    justify-items: center;

.container__card__item {

  display: grid;

  grid-template-rows: 210px 210px 80px;

  grid-template-areas: "image" "text" "footer";

  border-radius: 18px;

  background: #fff;

  box-shadow: 5px 5px 15px rgba(0,0,0,0.9);

  text-align: center;

  margin: 50px;

  .container__card__image {

    grid-area: image;

    background: url('~@/assets/website1.jpg');

    background-size: cover;

    border-top-left-radius: 15px;

    border-top-right-radius: 15px;

  }

  .container__card__text {

    grid-area: text;

    margin: 25px;

    h2 {

      margin-top: 5;

      font-size: 28px;

    }

    p {

      font-size: 15px;

      font-weight: 300;

    }

    .container__card__text__upperTitle {

      font-size: 15px;

      color: green;

    }

  }

  .container__card__footer {

    grid-area: footer;

    border-bottom-left-radius: 15px;

    border-bottom-right-radius: 15px;

    background-color: $primary-color;

    cursor: pointer;

    .fas {

      color: #fff !important;

      margin-top: 15px;

    }

  }

 }

}

.container__about{

  position: relative;

.container__about__image {

    height: 100%;

    width: 100%;

    filter: brightness(50%);

}

.container__about__text {

  position: absolute;

  top: 0;

.container__about__p {

  font-size: 4.0em;

  color: white;

  text-align: center;

  padding-top: 10%;

  padding-left: 50px;

  color: white;

  font-weight: 800;

}

}

You may want the height to be responsive. A higher one would be better to prevent overlapping; a small margin works too.