Why is my DIV overlapping text and another DIV? - html

Question

I've been stumped fixing this HTML for the past week. My divs continue to overlap one another. After you refresh the page, it goes back to normal but sometimes when you land on it, the divs overlap. Please help me fix this bug that plagues my site. Any help would be amazing! If you have any further questions, please ask and I'll return your message promptly. Thanks :). Here's an example
.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">Hot</div>
<div class="product_content">
<div class="product_title">Boho Wave Collection</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">Hot</div>
<div class="product_content">
<div class="product_title">Lover's Charm Collection</div>
<div class="product_price">$8.99</div>
</div>
</div>

Answer 1

Add 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;
}