I wanna change the color in the nav-link. I tried to add custom CSS but it didn’t work.

<div class="nav flex-column nav-pills bg-white" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link d-flex align-items-center p-1 active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">
        <div class="p-1">
            <img src="assets/images/profile-img/user1.jpg" class="message-user-img" alt="">
        </div>
        <div class="text-start d-none d-lg-block p-1">
            Home
        </div>
    </button>
    <button class="nav-link d-flex align-items-center p-1" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">
        <div class="p-1">
            <img src="assets/images/profile-img/user1.jpg" class="message-user-img" alt="">
        </div>
        <div class="text-start d-none d-lg-block p-1">
            About
        </div>
    </button>
</div>

.nav-link:hover{
 background-color: #2c759630;
}

.nav-link{
    background-color: #2c759630;
}