I have three products displayed with images and descriptions side by side. I used justify-content: space-between to create spacing between them, which seems to work for the last two products but not the first one, which is very annoying.
Even after trying to make the width 100% to give enough room for justify-content to apply the spacing, it still doesn't work.
.products-container {
margin-left: 10px;
margin-right: 20px;
outline: 2px solid yellow;
position: relative;
}
.products-container-title {
border-top: 3px solid black;
padding-top: 25px;
text-align: center;
text-transform: none;
font-family: /*"Sofia",*/ "Neutra Book", sans-serif;
font-size: 1.7rem;
color: black;
margin-bottom: 80px;
max-width: 287px;
margin-left: auto;
margin-right: auto;
}
.product {
display: flex;
justify-content: space-between;
margin-bottom: 80px;
}<div class="products-container">
<h2 class="products-container-title">REPLACEMENT BRUSH HEADS</h2>
<div class="product">
<div class="product-1-image">
<img src="img/precision-clean.png">
</div>
<div class="product-1-info">
<h2>PRECISION CLEAN</h2>
<p>Features cup-shaped bristles to reach deep between teeth, for cleaner teeth and healthier gums*</p>
<p>*vs a regular manual toothbrush</p>
<a href="" class="button-product-1">Learn More/Buy</a>
</div>
</div>
<div class="product">
<div class="product-2-info">
<h2>FLOSSACTION</h2>
<p>Features soft MicroPulseTM bristles for deep cleaning between teeth.</p>
<a href="" class="button-product-2">Learn More/Buy</a>
</div>
<div class="product-2-image">
<img src="img/floss-action.png">
</div>
</div>
<div class="product">
<div class="product-3-image">
<img src="img/sensitive-clean.png">
</div>
<div class="product-3-info">
<h2>SENSITIVE CLEAN</h2>
<p>Provides a gentle brushing experience, ideal for sensitive teeth and gums.</p>
<a href="" class="button-product-3">Learn More/Buy</a>
</div>
</div>
</div>