My menu items are not being colored completely

Question

I am using bootstrap 5. The color is working properly for background but I think something is wrong with that too but right now my main problem is that the menu buttons are not being colored completely. Only the middle part of them is colored and not the paddings. i have tried using background-clip but that is also not working.

HTML

<div class="theme-bg offcanvas offcanvas-start" tabindex="-1" id="offcanvasLeft" aria-labelledby="offcanvasLeftLabel" style="background-color: #7bed9f;">
    <div class="offcanvas-header justify-content-end">
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-header d-flex flex-column justify-content-center">
        <img class="profile mb-2" src="{% static 'images/profile-default.png' %}">
        <h2 class="text-center ">Welcome Saif</h2>
    </div>
    <hr class="m-0">
    <div class="offcanvas-body p-0 container-fluid list-group list-group-flush border-bottom">
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between container-fluid theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-home me-1"></i> Home </p>
            </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-search me-1"></i> Search </p>
            </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-pencil me-1"></i> Write your blog </p>
            </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-briefcase me-1"></i> Portfolio </p>
            </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-gear me-1"></i> Settings </p>
            </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-sign-out me-1"></i> Sign Out </p>
            </div>
        </a>
    </div>
</div>

CSS

.theme-bg {
    background-color: #7bed9f;
   padding: 0px;
    background-clip: padding-box;
}

the menu items aren't colored completely

Answer 1

1. Remove all padding from your list-group-item elements (you can do this by giving them a class of p-0)
2. Add your padding to the direct child (d-flex w-100 align-items-center justify-content-between container-fluid theme-bg)

That did it for me, hope it helps :)