custom active button link in bootstrap with css

I'm trying to customise a tab menu in bootstrap so that when a link is selected (active) it is highlighted in a coloured box. I can't seem to target the active element in css. Can someone advice how I need to do this? The html is as follows:

<div class="col col-md-3">
<div class="nav flex-column nav-pills" id="servicesTab" aria-orientation="vertical">
              <a class="nav-link nav-pill-custom active" id="v-pills-orientation-tab" data-toggle="pill" href="#v-pills-orientation" role="tab" aria-controls="v-pills-orientation" aria-selected="true">Orientation</a>
              <a class="nav-link nav-pill-custom" id="v-pills-education-tab" data-toggle="pill" href="#v-pills-education" role="tab" aria-controls="v-pills-education" aria-selected="false">Education</a>
              <a class="nav-link nav-pill-custom" id="v-pills-investigation-tab" data-toggle="pill" href="#v-pills-investigation" role="tab" aria-controls="v-pills-investigation" aria-selected="false">Investigation</a>
</div>
</div>

These link to some tabs on the same page:

<div class="col col-md-9">
            <div class="tab-content" id="v-pills-tabContent">
              <!-- ORIENTATION TAB-->
              <div class="tab-pane fade show active" id="v-pills-orientation" role="tabpanel" aria-labelledby="v-pills-orientation-tab">
                 <p>...</p>
              </div>
              <!-- EDUCATION TAB-->
               <div class="tab-pane fade" id="v-pills-education" role="tabpanel" aria-labelledby="v-pills-education-tab">
                 <p>...</p>
              </div>
            </div>
</div>

Then the css for the nav-pill-custom class is given as follows.

.nav-pill-custom {
    outline:none !important;
    color: #6481A6;
}

.nav-pill-custom:hover {
    background-color:#91cbeb;
    border: #91cbeb;
}

.nav-pill-custom:focus,
.nav-pill-custom:active
 {
    background-color:#91cbeb;
    border: #91cbeb;
}

Each of rthe css blocks works fine apart form the one for targeting the active link. I've also tried it without .nav-pill-custom:focus and I've tried it adding in .nav-pill-custom:active a targeting the anchor, which was a solution in another stackoverflow question but it doesnt seem to be working for me. How do I make this work?