After creating a div with the class of navbar and implementing it via display: flex; for each page I am on I want the active one in the navbar to have its entire background to have a different color. Right now, it is only affecting the text. Desired behavior was achieved via a different implementation of nav bar, but it caused different issues.

Current Behavior

Desired Behavior

HTML Code:

    <div class="navbar">
        <div class="active"><a href="HomePage.html">Home</a></div>
        <div><a href="LorePage.html">Lore</a></div>
        <div><a href="CharacterCreator.html">Character Creator</a></div>
        <div><a href="Roster.html">Roster</a></div>
    </div>

CSS Code:

.navbar {
    background-color: #0066b1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.navbar a {
    color: #fff773;
    text-decoration: none;
}

.navbar div.active {
    background-color: #233440;
}