My container div contains 6 inner divs, but they are not properly centered on the page.

Although the divs are equally spaced apart, they seem to be shifted to the left. I tried using 'justify-content: center' without success, and I suspect it might be due to the 'float: left' property applied to the entire section?

Mostly inline CSS is used, with some additional CSS, so I apologize for any confusion caused by the mix.

Here's an image showing the slight left alignment:

https://i.sstatic.net/oB9BH.png

HTML:

    <div>
  <section style="float: left;" id="quality__info">
    <span style="font-size: 3rem; font-weight: 700;"> Clear and comfortable </span>
    <p style="font-size: 1.7rem; opacity: 1; margin-bottom: 10px; padding-left: 30px; padding-right: 30px;"> We remove the need to empty leaked water or clean fogged up glass thanks to the full-face design. </p>
    <div class="col-lg-11 col-12 wow fadeInUp">
      <div style="display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px;" class=row>


        <div class="col-lg-4 col-md-6 col-12 quality__item">
          <div class="descriptionImageAndText">
            <img class="descriptionImage" style="width: 300px;" src="{{ 'cameraBlue.png' | asset_url }}" alt="Quick Connection" width="100%">

            <span class="titleDescription"> CAMERA MOUNTING </span>
            <p class="pDescription"> All gopro's and similar mountable cameras are compatible with the mask and can be secured on safely with the tools provided. </p>
          </div>
          <hr class="hrMobile" size="3" style="margin-top: 5px;">
        </div>

        <div class="col-lg-4 col-md-6 col-12 quality__item">
          <div class="descriptionImageAndText">
            <img class="descriptionImage" style="width: 300px;" src="{{ 'Anti-Fog.png' | asset_url }}" alt="Quick Connection" width="100%">

            <span class="titleDescription"> ANTI-FOG </span>
            <p class="pDescription"> All air is circulated around the masks outer layer and away from the visual screen.</p>
          </div>
          <hr class="hrMobile" size="3" style="margin-top: 5px;">
        </div>

        <div class="col-lg-4 col-md-6 col-12 quality__item">
          <div class="descriptionImageAndText">
            <img class="descriptionImage" style="width: 300px;" src="{{ 'anotherGood.png' | asset_url }}" alt="Quick Connection" width="100%">

            <span class="titleDescription"> EASY BREATHING </span>
            <p class="pDescription"> The seacaster X1 controls the airflow by circulating it around the masks outer tubes, with a separate intake valve for easier breathing.</p>
          </div>
          <hr class="hrMobile" size="3" style="margin-top: 5px;">
        </div>

        <div class="col-lg-4 col-md-6 col-12 quality__item">
          <div class="descriptionImageAndText">
            <img class="descriptionImage" style="width: 300px;" src="{{ 'goodBlack.png' | asset_url }}" alt="Quick Connection" width="100%">

            <span class="titleDescription"> ANTI-LEAK </span>
            <p class="pDescription"> The Seacaster X1 uses a double-rim to seal against incoming water, it also provides comfortability with material designed to not irritate.</p>
          </div>
          <hr class="hrMobile" size="3" style="margin-top: 5px;">

        </div>

        <div class="col-lg-4 col-md-6 col-12 quality__item">
          <div class="descriptionImageAndText">
            <img class="descriptionImage" style="width: 300px;" src="{{ 'goodPink.png' | asset_url }}" alt="Quick Connection" width="100%">

            <span class="titleDescription"> DURABILITY </span>
            <p class="pDescription"> The mask is designed to withstand the pressures of being in the sea and being dropped on rocks on the beach. </p>
          </div>
          <hr class="hrMobile" size="3" style="margin-top: 5px;">
        </div>

        <div class="col-lg-4 col-md-6 col-12 quality__item">
          <div class="descriptionImageAndText">
            <img class="descriptionImage" style="width: 300px;" src="{{ 'Full_Vision.png' | asset_url }}" alt="Quick Connection" width="100%">

            <span class="titleDescription"> WIDE VISION </span>
            <p class="pDescription"> The wide, flat visual screen with the separated, internal nostril creates a full 180 degree view. </p>
          </div>

          <hr class="hrMobile" size="3" style="margin-top: 5px;">

        </div>

      </div>
    </div>


  </section>
</div>

CSS:

    #quality__info {
    padding-top: 25px;
    padding-bottom: 45px;
    text-align: center;
    background-color: white;
}

.quality__text {
    display: flex;
    text-align: left;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;

}

@media screen and (max-width: 768px) {
  .quality__item {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
 }
}


@media (min-width: 992px) {
.container {
    max-width: 960px;
 }
}

.titleDescription {
    font-size: 1.9rem;
    font-weight: 600;
    padding: 10px;
    display: block;

}

.pDescription {
    padding-top: 3px;
    padding-bottom: 15px;
}

.descriptionImage {
  padding-bottom: 10px;
}

.descriptionImageAndText {
    vertical-align: top;
    display: inline-block;
    text-align: center;
}