Overrule Bootstrap 5 styling on nav-link

*Edit: This question has been answered sufficiently, and the problem I'm describing below apparently didn't exist in the first place, so it's moot anyway. Sorry, and thank you Sean Varnham!

I'm just learning to code for websites. I'm trying to make a navbar, based on the standard one from Bootstrap 5. It consists of several nav-item elements with nav-link elements inside them. I want to make the nav-link elements look the way I want them to.

I thought I should just be able to address the class in my CSS to overrule any styling about the same class that's in the Bootstrap CSS file. But the only way I've managed to do it is by either using !important (which, I've been told, is the lazy coder's way of doing it), by adding an ID to each link (which is very cumbersome), or by changing the class name (which is my current solution, see also the full navbar code in my CodePen here, but then what's the point of using Bootstrap?).

I've looked at the Bootstrap 5 CSS, and as far as I can see, the nav-link elements are only ever addressed as classes, which should be simple to overrule, right?

How I thought it would work:

.nav-link {
  color: red;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<li class="nav-item">
  <a class="nav-link" aria-current="page" href="#">HOME</a>
</li>

Resulting in red letters.

But that doesn't happen (*edit: wait, it does work now. I don't know why it didn't before.) Three solutions that do work, but are workarounds:

.nav-link {
  color: red !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<li class="nav-item">
  <a class="nav-link" aria-current="page" href="#">HOME</a>
</li>

#navhome {
  color: red;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<li class="nav-item">
  <a class="nav-link" id="navhome" aria-current="page" href="#">HOME</a>
</li>

.nav-link2 {
  color: red;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<li class="nav-item">
  <a class="nav-link2" aria-current="page" href="#">HOME</a>
</li>

What am I missing here?

Solution

The key thing with CSS is how specific you are (a.k.a specificity).

There are a couple ways things you can do to achieve what you're trying to do:

Load your custom stylesheet after the Bootstrap stylesheet,
Create identical/more specific references to the class you're trying to change.

The first bit is as easy as placing your custom stylesheet after your Bootstrap one in the HTML, PHP etc. (depending on how you're loading in stylesheets).

The second item would be achieved by doing something like this:

.nav-link a {
    color: red;
}

This way, you're specifically targeting the anchors within the .nav-link classes. If this doesn't work, you might need to be more specific by adding a parent node's ID attribute or a parent class, for example:

#targetID .nav-link a {
    color: red;
}

Note: You should try to reduce specificity to the CSS properties which are hard to overwrite, because being too specific and adding lots of classes can quickly balloon the size of a stylesheet. This can then have knock-on effects for things like page speed etc.

You can find more information on specificity here:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity