Items are not aligned in the center

November 15, 2022

i am trying to align all the .features items in the center but for some reason only the first one is doing it. I do not find the reason, please help.


    <section>
      <div class="features">
        <div><i class="fa-solid fa-fire"></i></div>
        <div>
          <h2>Premium Materials</h2>
          <p class="p-description">
            Our guitars are built with the best amazonian wood
          </p>
        </div>
      </div>
      <div class="features">
        <div>
          <i class="fa-solid fa-truck-fast"></i>
        </div>
        <div>
          <h2>Shipping</h2>
          <p class="p-description">
            We make sure you recieve your trombone as soon as we have finished
            making it. We also provide free returns if you are not satisfied.
          </p>
        </div>
      </div>
      <div class="features">
        <div><i class="fa-solid fa-user-check"></i></div>
        <div>
          <h2>Satisfaction</h2>
          <p class="p-description">
            For every purchase you make, we will ensure there are no damages or
            faults and we will check and test the quality of your instrument.
          </p>
        </div>
      </div>
    </section>

css

body {
  background-color: #eff1ed;
  font-family: "Roboto", sans-serif;
}

/* Header and nav bar */
header {
  display: flex;
}
.logo-guitar {
  padding: 2% 1% 3% 2%;
}
.luthier-name {
  width: 100%;
  padding: 1.5% 0 0 1%;
}
#nav-bar {
  display: flex;
  text-align: center;
  justify-content: space-between;
  flex-direction: row;
}
.nav-link {
  width: 94px;
  text-align: center;
  margin: 2px auto;
  padding-top: 15%;
  color: #131b23;
  text-decoration: none;
  font-weight: bold;
}
h1 {
  font-family: "Satisfy", cursive;
  font-size: 3rem;
}

/* email form */

.email-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#email {
  height: 25px;
  width: 100%;
}
#submit {
  width: 80%;
  margin-top: 5%;
  background-color: #ffe121;
  border: 0;
  font-weight: bold;
  height: 35px;
  font-family: inherit;
  font-size: large;
}

/* Features */

.fa-solid {
  color: #e3170a;
  font-size: 50px;
}

.features {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
}
.p-description {
  width: 80%;
}
section {
  padding-top: 10%;
}

If all them have the same class i do not understan why this is happening. I was trying to uso console to find the reason but i’m stuck.

>Solution :

It seems that the .p-description has a width based on its content (it is set in percentage, but its container also does not have a defined width), therefore it gets wider with more text inside, which result in unexpected different looks.

You can define width of .p-description with a value independent to its content and it should make them have same width, such as in px, em, vw, or vh.

Example:

.p-description {
 max-width: 350px;
}

Or the layout of its container and parent container can be adjusted to properly contain various length of content in .p-description, but it does take a bit more of refactoring.

Hope that it helps!