href='#id' header와 겹치지 않는 방법

포트폴리오의 header를 position: fixed로 고정시키고 anchor에 href="#id"를 넣어놓고 클릭을 해보니 header와 해당 article이 겹치는 현상이 발생하였고 스크롤 스냅기능을 이용해 아래와 같이 수정하여 해결하였습니다

<header>
  <nav>
    <ul>
      <li><a href="#main">profile</a></li>
    </ul>
  </nav>
</header>
<article id="profile">
  <!-- some html -->
</article>

header {
  height:45rem;
}

.profile {
  /* some css */
  scroll-margin-top: 45rem;
}

reference
· How to prevent anchor links from scrolling behind a sticky header with one line of CSS
· scroll-margin: MDN
· 스크롤과 관련된 CSS 속성 3가지