nav li span маржа слева

Question

привет, я добавляю активный класс в меню навигации с кодами, приведенными ниже. а затем я добавляю диапазон к активному классу и устанавливаю левый пиксель, но я хочу использовать его эффективно. Как я могу исправить?

Я показал на изображении, чтобы мы могли лучше понять, что я имею в виду.

оставшийся диапазон отображается неправильно. Я не мог найти решения. Уже спасибо за вашу помощь.

  Дом    видео    галерея     около     контакт        

li активный

function updateMenu(url) {
    const active = document.querySelector('.menu-item.active');

    if (active !== null) {
        active.classList.remove('active');
    }

    const links = Array.from(document.querySelectorAll('.menu-item'));

    links.forEach(function (li) {
        let anchor = li.querySelector("a");
        if (url.indexOf(anchor.href) > -1) {
            li.classList.add("active");
        }
    });
}

updateMenu(window.location.href);

меню li add spann

function menu_line() {
    var menu = jQuery('.main-menu.main_menu_container.menu_line_enable > ul');
    if (menu.length) {
        menu.each(function () {
            var menu = jQuery(this);
            var current = '';
            menu.append('<span class="menu_item_line"></span>');
            var menu_item = menu.find('> .menu-item');
            var currentItem = menu.find('> .active');
            var currentItemParent = menu.find('> .current-menu-ancestor');
            var line = menu.closest(".header_side").find('.menu_item_line');
            if (currentItem.length || currentItemParent.length) {
                current = currentItem.length ? currentItem : (currentItemParent.length ? currentItemParent : '');
                line.css({width: 25});
                line.css({left: current.find('>a').offset().left - menu.offset().left});
                line.css({marginLeft: 7});
            }

            menu_item.mouseenter(function () {
                line.css({width: jQuery(this).find('> a').outerWidth()});
                line.css({left: jQuery(this).find('> a').offset().left - jQuery(this).parent().offset().left});
                line.css({marginLeft: 0});
            });

            menu.mouseleave(function () {
                if (current.length) {
                    line.css({width: 25});
                    line.css({left: current.find('> a').offset().left - menu.offset().left});
                    line.css({marginLeft: 7});
                } else {
                    line.css({width: '0'});
                    line.css({left: '100%'});
                    line.css({marginLeft: 0});
                }
            });
        })
    }
}