我在一个网站上工作，我希望我的大部分元素是居中对齐的.每个元素都被包装在section中，这样我就可以顺畅地从一个页面滚动到下一个页面.我有一个h1元素，它表示"Build Your Future"，我试图将它完美地向左对齐，恰好在它表示"Purpose"的位置上方.然而，无论我做什么，我似乎都不能覆盖我的section，它表示这个特定元素的位置是align-items: center.我试过更改宽度和文本对齐方式，但它仍然卡在中间.
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;
}<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>