【CSS】ヘッダー追従のときアンカー先コンテンツを隠してしまう問題をscroll-padding-topで解決

 <div class="container">
    <header class="header">
      <div class="header__inner">
        <p>固定追従ヘッダー</p>
    
        <nav>
          <ul class="nav-items">
            <li><a href="#section1">セクション1</a></li>
            <li><a href="#section2">セクション2</a></li>
            <li><a href="#section3">セクション3</a></li>
            <li><a href="#section4">セクション4</a></li>
          </ul>
        </nav>
  
      </div>
  
  
    </header>
  
    <main>
      <section id="section1" class="section section1">
        <h2>タイトル</h2>
      </section>
      <section id="section2" class="section section2">
        <h2>タイトル</h2>
      </section>
      <section id="section3" class="section section3">
        <h2>タイトル</h2>
      </section>
      <section id="section4" class="section section4">
        <h2>タイトル</h2>
      </section>
    </main>
    <footer>フッター</footer>

  </div>

.container {
	padding-top: 60px;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	height: 60px;
	background: lightcoral;
	width: 100%;
	padding: 20px;
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nav-items {
	display: flex;
	align-items: center;
}

.nav-items li {
	margin-right: 8px;
}

.nav-items li:last-child {
	margin-right: 0;
}

.nav-items a{
	display: inline-block;
	font-size: 12px;
	color: #000;
}

.section {
	padding: 40px;
	height: 400px;
}

.section1 {
	background: lightblue;

}
.section2 {
	background: lightcyan;

}
.section3 {
	background: lightgreen;

}
.section4 {
	background: linen;

}

footer {
	height: 200px;
	background: lightsalmon;
}

html {
	scroll-padding-top: 60px;
}