Navigation menu has been broken

.menu-main {
    display: block;
    margin: 0;
}

.menu-main--item {
    display: inline-block;
    margin: 0;
}

.menu-main--item a {
    display: block;
    border-left: .1rem solid var(--global--color-navbar-border);
    background-color: var(--global--color-navbar-background);
    padding: var(--navbar-item-padding);
}

.menu-main--item:last-child a {
    color: var(--global--color-navbar-link);
    border-right: .1rem solid var(--global--color-navbar-border);
}

.menu-main--item a:hover,
.menu-main--item a:focus,
.menu-main--item a:active,
.menu-main--item a:visited {
    color: var(--global--color-navbar-link);
    background-color: var(--global--color-navbar-background-hover);
}

.menu-main--item.active a {
    color: var(--global--color-navbar-link);
    background-color: var(--global--color-navbar-background-active);
}

.menu-main--item.active a:hover,
.menu-main--item.active a:focus,
.menu-main--item.active a:active,
.menu-main--item.active a:visited {
    color: var(--global--color-navbar-link);
    background-color: var(--global--color-navbar-background-active-hover);
}

<nav>
    <ul class="menu-main">
        <li><a href="/en/" class="menu-main--item active">Home</a></li>
        <li><a href="/en/about" class="menu-main--item">About</a></li>
        <li><a href="/en/contact" class="menu-main--item">Contact</a></li>
        <li><a href="/en/portfolio" class="menu-main--item">Portfolio</a></li>
        <li><a href="/en/sitemap" class="menu-main--item">Sitemap</a></li>
    </ul>
</nav>