要解决这个问题，您应该使用h1元素的父容器（在本例中是div），而不是<section>元素。您遇到的问题是由于元素的限制。
要解决这个问题，您可以通过指定类来应用CSS规则。在本例中，<section>元素具有类“service”，因此我们可以使用它。此外，我们只想定位节内的第一个div，这可以使用:nth-child(1)选择器来实现。
最后，我们将所选div的宽度设置为与box类相同的长度。下面是更新的代码：

.service > div:nth-child(1) {
    width: 60vw;
}

通过应用这个CSS规则，section元素中第一个div的宽度将被设置为viewport宽度的60%。
希望这有帮助！如果你还有什么问题就告诉我。

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

.service h1 {
  display: flex;
  width: 100%;
  align-items: left;
  text-align: left;
}

.service > div:nth-child(1) {
    width: 60vw;
}

<section class="service">
  <!-- First Row -->
  <div>
    <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>

事实上，通过在flex中设置section service，justify content center，父项h1的宽度基本上被设置为适合内容。所以你有两个选择第一个是整理服务部分的h1 div第二个是将à width设置为父div

<div>
    <h1>Build Your Vision</h1>
  </div>
  <section class="service">
    <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>

或

<div class="title">
    <h1>Build Your Vision</h1>
  </div>

  .title{
     width: 100%
   }

您可以在元素上使用align-self属性，并使用flex-start将元素移动到容器的开头。我在你的标题元素上加了一个类

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

/* added this*/
.title {
    align-self: flex-start;
}

.service h1 {
  display: flex;
  width: 100%;
  align-items: left;
  text-align: left;
}

<section class="service">
        <div class="title"> <!-- added a new class -->
          <h1>Build Your Vision</h1>
        </div>
        <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>

最简单的解决方案可能只是稍微修改一下你的标记，但是这里有一个动态的解决方案，它不需要使用grid硬编码width/height值。

代码在注解中解释。

section {
  background-color: #fff;
  height: 100vh;
  height: fill-available;
  min-height: -moz-available;
  /*display: flex;
  justify-content: center;
  align-items: center; */
  
  display: grid;               /* grid layout */
  grid-template-columns: 1fr;  /* 1 column */
  width: fit-content;          /* set the width equal to the content width */
  align-content: center;       /* center everything vertically */
  margin-inline: auto;         /* center horizontally - shorthand for margin-left + margin -right */
  overflow-x: hidden;
}

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

<section class="service">
  <div>
    <h1>Build Your Vision</h1>
  </div>
  <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>