I want my buttons on my navbar to scroll to a certain section, but it doesn't scroll all the way down, and it scrolls to the most top of the section instead. I've done a lot of research regarding scroll behavior in HTML and CSS, but nothing on Google seems to solve my problem. I'm also looking for a solution without and JavaScript required. Here is a quick [JSFiddle demo](https://jsfiddle.net/6f9x4jzc/).

```css
* {
  color: white;
}

body,
html {
  background: #313131;
  min-height: 100vh;
}

.cover {
  /* background: url(bg.svg) no-repeat center center fixed;  */
  background-color: #313131;
  background-size: cover;
  color: white;
  padding-left: 2.5vw;
  height: 100%;
  width: 100%;
}

.mainnavbar {
  background: #313131b6
}

.textleft {
  text-align: left;
}

.header {
  font-size: xx-large;
  max-width: 700px;
  margin-top: 40vh;
}

.footer {
  font-size: small;
  margin-bottom: 40vh;
}

.cover {
  background: #313131
}
```

```html
<nav class="nav nav-pills nav-justified d-flex justify-content-center py-3 px-3 fixed-top mainnavbar" id="navbar">
  <li class="nav-item"><a href="#features" class="nav-link">Features</a></li>
  <li class="nav-item"><a href="#pricing" class="nav-link">Pricing</a></li>
  <li class="nav-item"><a href="#faqs" class="nav-link">FAQs</a></li>
  <li class="nav-item"><a href="#servers" class="nav-link">Servers</a></li>
  <li class="nav-item"><a href="#about" class="nav-link">About</a></li>
</nav>
<div class="cover d-flex aligns-items-center">
  <div class="textleft">
    <h1 class="header align-middle">Hello! Welcome to my site.</h1>
    <p class="footer align-middle">Proudly made by talented people at GoTeam.</p>
  </div>
</div>
<div class="container scrollable" data-bs-spy="scroll" data-bs-target="#navbar" data-bs-smooth-scroll="true" data-bs-offset="150">
  <hr>
  <h2 class="text-center">Features</h2>
  <p id="features">Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling
    behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder
    text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works.</p>
  <hr>
  <h2 class="text-center">Pricing</h2>
  <p id="pricing">Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling
    behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder
    text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works.</p>
  <hr>
  <h2 class="text-center">FAQs</h2>
  <p id="faqs">Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling
    behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder
    text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works.</p>
  <hr>
  <h2 class="text-center">Servers</h2>
  <p id="servers">Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling
    behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder
    text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works.</p>
  <hr>
  <h2 class="text-center">About</h2>
  <p id="about">Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling
    behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder
    text, so we can see how the scrolling behaviour when clicking a button works. Hello! I am making a quite long, yet information-dense placeholder text, so we can see how the scrolling behaviour when clicking a button works.</p>
</div>
```