Background not changing the color of the padding area

HI i am trying to make a button that changes color when hovered over, but it doesn't seem to be working. Usually i do not have a problem with this so am not sure whats going on.

HTML <div class="container"> <div class="item item-1" > <ul class="nav"> <li class="home button"><a herf="#">Home</a></li> <li class="prices button"><a herf="#">Prices</a></li> <li class="contact button"><a herf="#">Contact</a></li> <li class="about button"><a herf="#">About</a></li> <li class="logout button"><a herf="#">Logout</a></li> </ul>

</div> <div class="item item-2" ></div> <div class="item item-3" ></div>
<div class="item item-4" ></div>

</div>

CSS

*{ padding: 0; margin: 0; } .container { display: grid; grid-template-columns: 25% 25% 25% 25%; grid-template-rows: 20vh 20vh 20vh 15vh; grid-template-areas: 'header header header header' 'sidebar main main main' 'sidebar main main main' 'footer footer footer footer'; background-color: #2196F0; width: 100%;

} .item{ background-color: #000; } .item-1{ grid-area: header; font-size: 1.35em; } .item-2{ grid-area: sidebar; } .item-3{ grid-area: main; } .item-4{ grid-area: footer; }

.nav{ display: grid; background: #83BEEC; height: 100%; justify-content: center; align-items: flex-end; grid-template-columns: 30% 10% 10% 10% 10% 10% 10% 10%; font-family: 'Varela Round', sans-serif;

}

ul{ list-style: none; } .nav li{ padding: 10px; }

.home{ grid-column: 2 / 2; } .prices{ grid-column: 3 / 3; } .contact{ grid-column: 4 / 4; } .about{ grid-column: 5 / 5; } .logout{ grid-column: 7 / 7; }

.button{ text-align: center;

} .button :hover{ background-color: #DAEFFF; }