CSS text positioning problem with flexbox - text not aligning in the center properly-CodePudding

I have a section which has a div having display property as flex and inside the div are 7 more div containing pictures and text. The final output looks like this:

I want the text to align in such a way that they all start from the same axis horizontally, how do I fix it?

This is my code:

/* Why Choose Section */

#Why_choose {
  background-color: black;
  padding-top: 5rem;
  padding-bottom: 2.5rem;
}

#Why_choose h1,
h2,
p {
  color: white;
  text-align: center;
}

#Why_choose h2 {
  width: 13rem;
  font-weight: 400;
  font-size: 1rem;
  margin-top: 2rem;
}

#Why_choose h1 {
  font-size: 5rem;
  /* padding-top: 5rem; */
}

#Why_choose img {
  width: 50%;
}

.red-box {
  background-color: red;
  width: 8rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
  position: relative;
  margin: 0;
}

.big-box {
  transition: transform 100ms ease;
  height: 100%;
}

.big-box:hover {
  transform: scale(1.2);
}

#Why_choose .wrapped_container {
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: relative;
  margin: 7rem 0 4rem 0;
}

#Why_choose .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#Why_choose hr {
  width: 100%;
  position: absolute;
  top: 4rem;
  z-index: -1;
}

#Why_choose a {
  position: absolute;
  height: 8rem;
  width: 8rem;
  z-index: 100;
  opacity: 0;
  text-decoration: none;
}

<section id="Why_choose">
  <h1>why snap smile?</h1>
  <div >

    <hr>
    <div >
      <div >
        <div >
          <a href="https://www.google.com/" target="_blank"></a>
          <img src="images/why-choose-img/customized.png">
        </div>
      </div>
      <h2>CUSTOM MADE</h2>
    </div>

    <div >
      <div >
        <div >
          <a href="https://www.google.com/" target="_blank"></a>
          <img src="images/why-choose-img/home_support.png">
        </div>
      </div>
      <h2>WE WORK FROM HOME</h2>
    </div>

    <div >
      <div >
        <div >
          <a href="https://www.google.com/" target="_blank"></a>
          <img src="images/why-choose-img/comfortable.png">
        </div>
      </div>
      <h2>CONSERVES NATURAL TEETH</h2>
    </div>

    <div >
      <div >
        <div >
          <a href="https://www.google.com/" target="_blank"></a>
          <img src="images/why-choose-img/pain-free.png">
        </div>
      </div>
      <h2>PAIN FREE AND REMOVABLE</h2>
    </div>

    <div >
      <div >
        <div >
          <a href="https://www.google.com/" target="_blank"></a>
          <img src="images/why-choose-img/instant-delivery.png">
        </div>
      </div>
      <h2>INSTANT DELIVERY</h2>
    </div>

    <div >
      <div >
        <div >
          <a href="https://www.google.com/" target="_blank"></a>
          <img src="images/why-choose-img/affordable.png">
        </div>
      </div>
      <h2>UNDER YOUR BUDGET</h2>
    </div>

    <div >
      <div >
        <div >
          <a href="https://www.google.com/" target="_blank"></a>
          <img src="images/why-choose-img/eat_drink.png">
        </div>
      </div>
      <h2>EAT&DRINK WITHOUT REMOVING</h2>
    </div>

  </div>
</section>

CodePudding user response：

You could make the outer .container have a display: flex and align it's contents the same way in each container, just add:

.container {
    display: flex;
    flex-direction: column;         /* contents aligned vertically */
    align-items: center;
    justify-content: space-around;  /* contents are spaced in the same repeatable way */
}

That should align them in a proper way and the text will look aligned in the horizontal axis.

CodePudding user response：

Found the solution, I changed the align-items property of wrapped-container to flex-start.