Navbar active links not working

Hello,

I'm hoping someone can help figure this out.  I'll post below the HTML and CSS that is setup but my active links do not show as the set active color just the normal color, the hover works fine, the correct color shows when hovering on any link and on any page.

I copied this from one page, but every page are accurately (I believe) marked as active.

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="index.html"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="tips.html">Tips</a></li>
<li class="nav-item active"> <a class="nav-link" href="request service.html">Request Service<span class="sr-only">(current)</span></a></li>
<li class="nav-item"> <a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>

Here is the CSS, it was added using Page>Properties, then I copied the code to each page.

<style type="text/css">
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #FF3000;
}
a:active {
text-decoration: none;
color: rgba(255,48,0,1);
}
</style>