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 navbar, but it caused different issues.
.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;}<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>I first attempted this via a tag, but for some reason it led to the far left/home item of the bar to only be partially colored in its background. This only occurred at the Home selection:
