Почему мой DIV перекрывает текст и другой DIV?

Question

Я был в тупике, исправляя это HTML на прошлой неделе. Мои дивы продолжают перекрывать друг друга. После того, как вы обновите sh страницу, она вернется к нормальной жизни, но иногда, когда вы садитесь на нее, элементы div пересекаются. Пожалуйста, помогите мне исправить эту ошибку, которая изводит мой сайт. Любая помощь будет потрясающей! Если у вас есть дополнительные вопросы, пожалуйста, задавайте, и я быстро верну ваше сообщение. Спасибо :). Вот пример

.product {
  width: calc((100% - 90px) / 4);
  margin-bottom: 59px;
  position: relative;
}

.product_image {
  width: 100%;
}

.product_image img {
  max-width: 100%;
}

.product_content {
  width: 100%;
  padding-top: 36px;
  padding-bottom: 38px;
}

.product_title a {
  font-size: 18px;
  font-weight: 500;
  color: #1b1b1b;
  line-height: 1.1;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

.product_price {
  font-size: 16px;
  font-weight: 500;
  color: #6c6a74;
  line-height: 0.75;
  margin-top: 13px;
}

.product_extra {
  position: absolute;
  top: 0;
  left: 54px;
  width: 66px;
  height: 36px;
  text-align: center;
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
  transform: rotate(90deg);
}

.product_extra a {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 36px;
}

<div class="row">
  <div class="col">

    <div class="product_grid">

      <!-- Product -->
      <div class="product">
        <div class="product_image"><img src="Products/wave_pack/details_1.jpg" alt="Wave Pack"></div>
        <div class="product_extra product_sale"><a href="boho_wave_collection.html">Hot</a></div>
        <div class="product_content">
          <div class="product_title"><a href="boho_wave_collection.html">Boho Wave Collection</a></div>
          <div class="product_price">$8.99</div>
        </div>
      </div>

      <!-- Product -->
      <div class="product">
        <div class="product_image"><img src="Products/SLH_collections/lovers/details_1.png" alt="Lover's Charm"></div>
        <div class="product_extra product_hot"><a href="SLH_lovers_s.html">Hot</a></div>
        <div class="product_content">
          <div class="product_title"><a href="SLH_lovers_collection_.html">Lover's Charm Collection</a></div>
          <div class="product_price">$8.99</div>
        </div>
      </div>

Answer 1

Добавить Css -

.product_grid {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin: 0 -20px;
    }

.product {
      width: calc(100%/4 - 40px);
      margin-bottom: 59px;
      position: relative;
      margin: 0 20px;
    }