如何覆盖section的align-items:center，让h1元素左对齐？

你的问题核心在于：<section>作为flex容器设置了align-items: center，这会强制所有直接子元素（包括包裹h1的那个<div>）在水平方向上居中对齐。你给h1加的text-align: left只是让文本在h1自身范围内左对齐，但它的父div本身被居中了，所以整体看起来还是处于页面中间。

下面是两种直接有效的解决方法：

方法一：让h1的父容器与下方.box同宽 #

这种方法最直接，让h1的容器宽度和下方的.box保持一致，自然就能和Purpose标题左对齐：

修改后的CSS：

section {
  background-color: #fff;
  height: 100vh;
  height: fill-available;
  min-height: -moz-available;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.box {
  background-color: white;
  display: flex;
  justify-content: space-between;
  width: 60vw;
}

/* 新增h1容器的样式 */
.heading-wrapper {
  width: 60vw; /* 和下方.box保持相同宽度 */
  margin-bottom: 2rem; /* 可选：增加和下方内容的间距 */
}

.service h1 {
  text-align: left;
  margin: 0; /* 可选：去掉h1默认margin避免多余间距 */
}

修改后的HTML：

<section class="service">
  <!-- First Row -->
  <div class="heading-wrapper">
    <h1>Build Your Vision</h1>
  </div>
  <!-- Second Row -->
  <div class="box">
    <div>
      <h2>Purpose</h2>
      <p>Built with your vision</p>
    </div>
    <div>
      <h2>Authentication</h2>
      <p>From services you can trust</p>
    </div>
    <div>
      <h2>User Interface</h2>
      <p>Accessible from any device</p>
    </div>
  </div>
</section>

方法二：用align-self覆盖section的居中设置 #

如果不想设置固定宽度，可以给h1的父div添加align-self: flex-start，再通过margin让它和下方.box对齐：

/* 替代方法的样式 */
.heading-wrapper {
  align-self: flex-start; /* 强制该元素靠左，覆盖section的align-items:center */
  margin-left: calc((100vw - 60vw)/2); /* 计算出和下方.box相同的左侧间距 */
}

.service h1 {
  text-align: left;
}

补充说明 #

你之前给h1设置的display: flex和align-items: left完全没用：align-items没有left这个有效值，正确的取值是flex-start；而且h1不需要被设为flex容器，这反而会干扰文本的正常对齐逻辑，直接删掉这些属性即可。

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