Overriding Bootstrap navbar classes - wont work

Alright, so I am having issues overriding some of bootstraps navbar classes. I'm not sure but it works if I use !important but I'd rather avoid that at any cost.

So here is my html:

<nav class="navbar navbar-default" role="navigation">
  <ul class="navbar navbar-nav">
    <li><a>Actions</a></li>
    <li><a>Profile</a></li>
    <li><a>Kingdom</a></li>
    <li><a>Inventory</a></li>
    <li><a>Alliance</a></li>
    <li><a>Mail Box</a></li>
    <li><a href="user/logout">Logout</a></li>
  </ul>
</nav>

Here are some of the CSS I have tried:

.navbar.navbar-nav li a {
  color: lightgray;
}

This one doesn't work ^

.navbar.navbar-nav > li > a {
  color: lightgray;
}

Neither does this one ^

.navbar-nav li a {
  color: lightgray !important;
}

This one is the only one that has worked ^ (I have tried doing it without the !important as well.

EDIT: CSS calling

  <title># - KoG</title>
  <link rel="stylesheet" type="text/css" href="../components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="../styles/game/default.css">
</head>

EDIT:

This approach is dealing with overwriting specificity issue, as you are overwriting the style provided in _reboot.scss(which is part of bootstrap)

Hence, this is one of solution to achieve, what you are trying to achieve, your solution must be another way of dealing with this problem.

Example which changes those li without href

.navbar .navbar-nav a:not([href]) {
  color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-default" role="navigation">
  <ul class="navbar navbar-nav">
    <li><a>Actions</a></li>
    <li><a>Profile</a></li>
    <li><a>Kingdom</a></li>
    <li><a href="#">Inventory</a></li>
    <li><a>Alliance</a></li>
    <li><a>Mail Box</a></li>
    <li><a href="user/logout">Logout</a></li>
  </ul>
</nav>

In the below example if you use .navbar .navbar-nav a, it will just change those a with are having href.

.navbar .navbar-nav a {
  color: red;
}

.navbar .navbar-nav a {
  color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-default" role="navigation">
  <ul class="navbar navbar-nav">
    <li><a>Actions</a></li>
    <li><a>Profile</a></li>
    <li><a>Kingdom</a></li>
    <li><a href="#">Inventory</a></li>
    <li><a>Alliance</a></li>
    <li><a>Mail Box</a></li>
    <li><b><a href="user/logout">Logout</a></b></li>
  </ul>
</nav>