I've recently started to learn Bootstrap and used their grid system for one of the sections of my projects. Normally, when I use the base column container along with the row div followed by the grid items specified by their breakpoint classes, when I scale down my browser (vertically) they would rearrange properly with spaces in-between.
Except in this instance, when I scale my browser, my grid items overlap significantly and won't rearrange except for if the browser is at its smallest size.
Here's the snippet of code and a picture of the issue: Overlap example
<div class="product-container container"><div class="row"><div class="product-box col-xs-6 col-sm-6 col-md-3 col-lg-3 ms-2"><a href="#"><img class="product-img" src="https://routescoffee.co.uk/wp-content/uploads/2023/01/Rwanda-57.png"><p class="product-title">Rwanda Kinini</p><p class="product-price">$11.00 - $38.00</p></a></div><div class="product-box col-xs-6 col-sm-6 col-md-3 col-lg-3 ms-2"><a href="#"><img class="product-img" src="https://routescoffee.co.uk/wp-content/uploads/2019/12/CFHBRAZIL.png"><p class="product-title">CFH Brazil</p><p class="product-price">$9.00 - $32.00</p></a></div><div class="product-box col-xs-6 col-sm-6 col-md-3 col-lg-3 ms-2"><a href="#"><img class="product-img" src="https://routescoffee.co.uk/wp-content/uploads/2019/12/Kenya-58.png"><p class="product-title">Kenya Acacias</p><p class="product-price">$10.00 - $35.00</p></a></div></div></div>At first, I thought adding a margin in between the items would help but the overlap when scaling down the browser still persisted, the only difference it made was instead of the application of two grid items taking up an equal amount of col space, they had to occupy their own column because of lack of space.