Without scroll-padding

by agib

HTML

<nav class="navbar">
  <a href="#home">Home</a>
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
</nav>
<h1 id="home">Without scroll-padding</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sit eligendi quod nostrum alias, hic quae labore temporibus corrupti illo earum, expedita in, dolorem eveniet officiis quis. Incidunt, nobis, maiores!
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sit eligendi quod nostrum alias, hic quae labore temporibus corrupti illo earum, expedita in, dolorem eveniet officiis quis. Incidunt, nobis, maiores!
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sit eligendi quod nostrum alias, hic quae labore temporibus corrupti illo earum, expedita in, dolorem eveniet officiis quis. Incidunt, nobis, maiores!
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sit eligendi quod nostrum alias, hic quae labore temporibus corrupti illo earum, expedita in, dolorem eveniet officiis quis. Incidunt, nobis, maiores!
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sit eligendi quod nostrum alias, hic quae labore temporibus corrupti illo earum, expedita in, dolorem eveniet officiis quis. Incidunt, nobis, maiores!
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sit eligendi quod nostrum alias, hic quae labore temporibus corrupti illo earum, expedita in, dolorem eveniet officiis quis. Incidunt, nobis, maiores!
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sit eligendi quod nostrum alias, hic quae labore temporibus corrupti illo earum, expedita in, dolorem eveniet officiis quis. Incidunt, nobis, maiores!
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sit eligendi quod nostrum alias, hic quae labore temporibus corrupti illo earum, expedita in, dolorem eveniet officiis quis. Incidunt, nobis, maiores!
</p>
<p>
  Lorem ipsum dolor sit amet,...

CSS

* {
  font-family: sans-serif;
}

body {
  padding: 5rem 2rem 2rem 2rem;
  margin: 0;
  font-size: 16px;

}
.navbar {
  padding: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: rgba(0,100,70,.85);
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 1rem;
}