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

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

Changing menu options is NOT changing the active class even though I followed the solution in the link below

Here’s the link to the temp site which I’m creating for the client: http://wtr2022.webparity.net/index.html

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.

Projects Section

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.

Targeting off for menu to Section

Here’s the NAV code which points DIRECTLY to the ID’s of the sections…

            <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>

Here’s the code for the section: Blog

        <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>
...

And the code for the section Roofing

        <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>
...

And finally the code for the Contact 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">
...

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.