CSS布局求助：.features元素仅首个居中，其余未居中

尝试将所有.features元素居中对齐，但不知为何只有第一个元素能成功居中，所有元素都使用了相同的类，找不到原因。

HTML代码 #

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

/* 功能模块 */

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

解决方案 #

问题根源在于.features是块级元素，默认会占满父容器section的全部宽度。你设置的justify-content: center只是让.features内部的图标和文本在这个满宽容器里居中，但当文本内容较长时，视觉上会显得没有居中；而第一个.features因文本较短，居中效果更明显。

以下两种方法都能让所有.features模块整体居中：

方法一：给section设置flex布局 #

让section成为flex容器，垂直排列子元素并实现水平居中：

section {
  padding-top: 10%;
  display: flex;
  flex-direction: column;
  align-items: center; /* 让子元素水平居中 */
  gap: 2rem; /* 可选，为模块间添加间距，提升美观度 */
}

方法二：给.features添加自动外边距 #

通过左右自动外边距让.features自身居中，同时限制最大宽度避免内容过宽：

.features {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  margin: 1rem auto; /* 上下添加间距，左右自动外边距实现居中 */
  max-width: 800px; /* 根据需求调整最大宽度，防止文本过宽 */
}

内容的提问来源于stack exchange，提问作者OMAR FORERO