容器内的div似乎不在页面中央

Question

我在一个容器div中有6个div，很遗憾，它们似乎不在页面中央。

他们彼此等距地坐着，大多数情况下看起来还不错，但整个东西看起来都向左移动。我尝试使用“ justify-content：center”，但是由于不确定的原因，在这种情况下实际上并没有这样做？

我还在整节中使用'float：left'，所以这可能是问题的一部分吗？

通常是内联css，但也有一些css，对于使用两者的混淆感到抱歉。

这是一张图片，说明它如何稍微偏向左侧：

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

Answer 1

删除col-lg-11类：

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

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