why my css is not working for logout button - html

Question

I have written a simple html and css file but my css is not working for the second last link i.e. for the link to logout
here is the code to my HTML file
<nav class="navbar navbar-expand-md navbar-dark">
<a class="navbar-brand" href="#">
<img src="../../../assets/logo.JPG" class="d-inline-block img-fluid align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id = "navbarSupportedContent" >
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<div *ngIf="email" class="navbar-text custom float-left">
{{email}}
</div>
</li>
<li class="nav-item">
<a [routerLink]=" ['/'] " class="nav-link">
<fa-icon [icon] = "faHome" primarycolor = "black"></fa-icon>
Home</a>
</li>
<li class="nav-item">
<a *ngIf="!email" [routerLink]=" ['/signin'] "
routerLinkActive="active" class="nav-link">
<fa-icon [icon] = "faSignInAlt" primarycolor = "black"></fa-icon>
signIn</a>
</li>
<li class="nav-item">
<a *ngIf="!email" routerLinkActive="active"
[routerLink]=" ['/signup'] " class="nav-link">
<fa-icon [icon] = "faUserPlus" primarycolor = "black"></fa-icon>
signUp</a>
</li>
<li class="nav-item">
<a *ngIf="email" (click)="handleSignOut()" class="nav-link">
<fa-icon [icon] = "faSignOutAlt" primarycolor = "black"></fa-icon>
Log Out</a>
</li>
<li class="nav-item">
<a *ngIf="email" routerLinkActive="active" [routerLink]=" ['/addpost']"
class="nav-link btn btn-warning text-primary">
Post Your Story</a>
</li>
</ul>
</div>
</nav>
Here is the code to my css file
.active{
background-color: purple;
}
.custom{
color: black;
}
nav{
background-color: #ffffff;
}
li>a:link{
color: black;
border-radius: 15px;
}
li>a:visited{
color: black;
border-radius: 15px;
}
I don't know what is happening here
inline CSS in that link is working quite good
I basically want my logout to be black

Answer 1

It is very difficult to guess based on the small excerpt. The best way is to use the computed tab of the chrome debugging tool. You need to inspect the element, go to the computed tab and expand the CSS property. You would see who sets and overrides the property value.
There is a good article on how to debug css.

Answer 2

Have you tried targeting it directly by giving it a unique class or id and using that in the css?
Have you tried putting "!important" after the color you want in the css?
It looks like you are using an external css library. Some of the css from external libraries can be hard to override. "!important" helps with that sometimes.