Changing Menu items, when going to a specific section of the site, is off by one section and I don't know why

Question

This is a new question, based off this question which was nicely resolved.

Here's the temp site which I'm creating for the client. Here's how this all originated.

That all being said, however, when you scroll to or click on PROJECT, you'll be scrolled to the completed projects section. This is good.

However, when you click or SCROLL to Blog, Roofing or Contact, the targeting is off.

Blog is not active but Roofing is and so on for Roofing and Contact.

So, I don't understand when you scroll past or into or click to Blog, Roofing and Contact, the Active feature is off kilter. @kmoser helped with my previous question and I didn't want to turn it into a discussion so I made a new question. Thank you everyone.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light sticky-top" id="ftco-navbar">
  <div class="container">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="fa fa-bars"></span> Menu
    </button>

    <div class="collapse navbar-collapse" id="ftco-nav">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
        <li class="nav-item"><a href="#aboutus" class="nav-link">About</a></li>
        <li class="nav-item"><a href="#serviceslink" class="nav-link">Services</a></li>
        <li class="nav-item"><a href="#projectslink" class="nav-link">Project</a></li>
        <li class="nav-item"><a href="#bloglink" class="nav-link">Blog</a></li>
        <li class="nav-item"><a href="#roofinglink" class="nav-link">Roofing</a></li>
        <li class="nav-item"><a href="#contactlink" class="nav-link">Contact</a></li>
      </ul>

      <div class="d-flex align-items-center justify-content-center">
        <img src="images/logos/weathertight-logo.png" class="logosmaller" alt="" />
        <!-- <span class="flaticon-roof-2"></span> -->
      </div>

      <div class="col-3 d-flex justify-content-end align-items-center">
        <div class="social-media">
          <p class="mb-0 d-flex">
            <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-facebook"><i class="sr-only">Facebook</i></span></a>
            <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-twitter"><i class="sr-only">Twitter</i></span></a>
            <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-instagram"><i class="sr-only">Instagram</i></span></a>
            <a href="#" class="d-flex align-items-center justify-content-center"><span class="fa fa-dribbble"><i class="sr-only">Dribbble</i></span></a>
          </p>
        </div>
      </div>
    </div>
  </div>
</nav>

<section id="bloglink" class="ftco-section">
  <div class="container">
    <div class="row justify-content-center pb-5 mb-3">
      <div class="col-md-7 heading-section text-center ftco-animate">
        <span class="subheading">News &amp; Blog</span>
        <h2>Latest news from our blog</h2>
      </div>
    </div>
  </div>
</section>

<section id="roofinglink" class="ftco-section bg-light">
  <div class="container">
    <div class="row justify-content-center pb-5 mb-3">
      <div class="col-md-12 heading-section text-center ftco-animate">
        <span class="subheading">Roofing</span>
        <h2>Roofing that Pays for Itself</h2>
        <div class="sec-title text-center wow animated fadeInDown">
          <h2>Commercial Roofing that Pays for Itself!</h2>
          <p>The heating and AC loss you have been experiencing in your commercial building can be significantly reduced with one of our energy saving roofing systems! WeatherTight Systems’ completely air-tight roofing systems seal in your building’s cool
            air and heat. For most of our flat top roofing materials we also apply a seamless, high-solids silicone and acrylic based material as a way of ensuring there will be no water leaks into your commercial building. The result is a roof that is
            truly protected from the scorching sun and other destructive weather elements.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="contactlink" class="ftco-section bg-light">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-12">
        <div class="wrapper">
          <div class="row no-gutters">
            Contact link section
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>