scroll-margin

移動先の要素に、手前に空けたい分を指定します。 idは移動先の要素にそのまま付けられ、空の要素もラッパーも要りません。

h2 {
  scroll-margin-top: 80px;
}

<h2 id="contact">お問い合わせ</h2>

見出しをラッパーで囲み、空のアンカー要素を絶対配置で、ヘッダーの高さ分だけ上にずらしていました。 idはアンカーに付けるため、見出しのレイアウトは変わりませんが、idのためだけの要素とラッパーが要ります。

.section {
  position: relative;
}

.anchor {
  position: absolute;
  top: -80px;
}

<section class="section">
  <a id="contact" class="anchor"></a>
  <h2>お問い合わせ</h2>
</section>

効くのは、ページ内リンクや#付きのURLで開いたとき、scrollIntoView()のように、要素を目がけて移動したときです。スクロールスナップを使っている場合は、止まる位置にも効きます。それ以外の、座標を渡すscrollTo()などには効きません。
移動先の要素ごとに指定します。ヘッダーの高さを1か所で決めたい場合は、htmlにscroll-padding-topを指定する方法もあります。 scroll-padding-topも、2021年4月から全ブラウザで使えます。
ヘッダーの高さが画面幅で変わる場合は、高さをカスタムプロパティにして、ヘッダーとscroll-margin-topの両方で使います。