css command justify-content: space-between does not work for one of the product but works fine for the last two

I have three products with imag and discription side by side and for the space in between i have used justify-content: space-between; It seems to work for the last two products but not the first one, very annoying.

I have tried making the width 100% so that the justify-content has enough room to do the spacing but still no use.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

<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>

<!-- end snippet -->

I think based on your images that you're misunderstanding what is and is not being created by justify-content: space-between.

In your image with product 2, that additional space is being created by display: flex, each element has been given 50% width to take up (because there's 2 child div elements), the text in .product-2-info isn't taking full width so the remainder is the purple section.

For .product-1-info however the text takes the full width and wraps, so there's no purple section.

To fix this you'll need to apply a width less than 50% to the info and image classes.

An additional side note, classes should be used when the styles need to be applied to more than one element, id's should be used when the styles should be unique, so in this case if you wanted all info and image classes to have the same styles you could just use:

.product-image

and

.product-info

I have added the following css style to work.

.product-image {
  max-width: 500px;
}
.product-info {
 max-width: 500px;
}