Не правильное позиционирование подчеркивания якоря страницы js

$('.nav-link').click(function () {
        $('.nav-link').removeClass('active');

        $(this).addClass('active');

        var position = $(this).position().left;
        var width = $(this.parentElement).width();
        var marginLeft = parseInt($(this).css('margin-top'));

        $('#link-line').stop().animate({
            left: position - 10,
            width: width + 20,
        }, 300);
    });

    $('.nav-link.active').trigger('click');

.navbar-nav {
  display: flex;
}

#link-line {
    position: absolute;
    margin-top: -1vw;
    padding: 0;
    transition: transform 0.3s ease-in-out;
    left: 0;
}

.nav-item {
    margin-right: 10px;
    margin-top: -1px;
    text-decoration: none;
    list-style-type: none;
}

.nav-item > .active {
    color: var(--main-color) !important;
}

.nav-link {
display: block;
    padding: .5rem 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Главная</a>
                            <svg id="link-line" width="130" height="24" viewBox="0 0 130 24" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <g id="Button Bloom" filter="url(#filter0_d_11_113)">
                                    <path d="M65 13.8924C95.3757 13.8924 120 15.0161 120 10H10C10 15.0161 34.6243 13.8924 65 13.8924Z"
                                          fill="#00C2FF"></path>
                                </g>
                                <defs>
                                    <filter id="filter0_d_11_113" x="0" y="0" width="130" height="24"
                                            filterUnits="userSpaceOnUse"
                                            color-interpolation-filters="sRGB">
                                        <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                                        <feColorMatrix in="SourceAlpha" type="matrix"
                                                       values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                                                       result="hardAlpha"></feColorMatrix>
                                        <feOffset></feOffset>
                                        <feGaussianBlur stdDeviation="5"></feGaussianBlur>
                                        <feComposite in2="hardAlpha" operator="out"></feComposite>
                                        <feColorMatrix type="matrix"
                                                       values="0 0 0 0 0.247059 0 0 0 0 0.843137 0 0 0 0 0.964706 0 0 0 0.5 0"></feColorMatrix>
                                        <feBlend mode="normal" in2="BackgroundImageFix"
                                                 result="effect1_dropShadow_11_113"></feBlend>
                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_11_113"
                                                 result="shape"></feBlend>
                                    </filter>
                                </defs>
                            </svg>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Релизы</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Команда</a>
                        </li>
                        <li class="nav-item last-navlink">
                            <a class="nav-link" href="#">О нас</a>
                        </li>
                    </ul>
                </div>