How do I extend an <li> element?-CodePudding

I have a nav under a header and I want the nav-links to change color and for a white background to be added when hovered over. However, when I hover over the links the white background only shows around the link instead of extending to the most available space as the links are displayed in flex where justify-content: space-around. There are 4 links so I want each link to take up a quarter of the page. How do I do this?

HTML:

    <nav>
        <ul >
            <li >
                <a  href="{% url 'index' %}">Active Listings</a>
            </li>
            <li >
                <a  href="{% url 'index' %}">Categories</a>
            </li>
            <li >
                <a  href="{% url 'index' %}">Watchlist</a>
            </li>
            <li >
                <a  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;
}

CodePudding user response：

I ended up just changing the width of the li and aligning the text in the center because each of the links are going to take up a quarter of the page as there are 4 so they would each take up 25% of the page.

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

CodePudding user response：

Try using flex: 1; for the li tag.