Как расширить элемент <li>?

У меня есть nav под header, и я хочу, чтобы nav-links меняли цвет и чтобы при наведении на них добавлялся белый фон. Однако, когда я навожу курсор на ссылки, белый фон отображается только вокруг ссылки вместо того, чтобы распространяться на все доступное пространство, поскольку ссылки отображаются в flex и justify-content: space-around. Имеется 4 ссылки, поэтому я хочу, чтобы каждая ссылка занимала четверть страницы. Как мне это сделать?

HTML:

    <nav>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="{% url 'index' %}">Active Listings</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'index' %}">Categories</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'index' %}">Watchlist</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'index' %}">Create Listing</a>
            </li>
        </ul>
    </nav>

CSS:

nav {
    background-color: var(--purple);
    color: #fff;
}

.nav-link {
    color: #fff;
}

li {
    width: auto;
}

li:hover {
    color: var(--purple);
    background-color: #fff;
    text-decoration: none;
    border-radius: 5px;
}

.nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

В итоге я просто изменил ширину li и выровнял текст по центру, потому что каждая из ссылок будет занимать четверть страницы, так как их 4, и каждая будет занимать 25% страницы.

li {
    width: 25%;
    text-align: center;
}

Попробуйте использовать flex: 1; для тега li.

Вернуться на верх