【CSS中級】ヘッダーを固定すると画面幅中央に配置したい要素がずれている件

<header>
    <h1>SAMPLE SITE</h1>
</header>

header {
    height: 80px;　/*← ヘッダーの高さを80pxに指定*/
    position: fixed;　/*← ヘッダーを固定する*/
    top: 0;　/*← 一番上から０pxの位置にヘッダーを固定*/
    width: 100%;
    text-align: center;
    background: #b6c7d7;
}
 
h1 {
    font-size: 30px;
    padding: 18px 0;
}

<div class="mv">
      <div class="text">
          <p>メインビジュアルの<br>中央に文字を配置</p>
      </div>
</div>

.mv {
    background: url(../images/mv.jpg) center;
    background-size: cover;
}

.text {
    display: flex;　/*← フレックスアイテムに設定*/
    justify-content: center;　/*← 左右の中央寄せ*/
    align-items: center;　/*← 上下の中央寄せ*/
    color: #fff;
    font-size: 80px;
}

.text {
    height: 100vh; /*→ メインビジュアルの高さを指定*/
 　 display: flex;　
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 80px;
}

.text {
    height: calc(100vh - 80px); /*→ メインビジュアルの高さを指定*/
    display: flex;　
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 80px;
}

.text {
    margin-top: 80px; /*→ ヘッダーの高さ分の余白をとる*/
    height: calc(100vh - 80px); /*→ メインビジュアルの高さを指定*/
    display: flex;　
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 80px;
}