title: Overrule Bootstrap 5 styling on nav-link
body: <p>*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!</p>
  <p>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 <code>nav-item</code> elements with <code>nav-link</code> elements inside them. I want to make the <code>nav-link</code> elements look the way I want them to.</p>
  <p>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 <code>!important</code> (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 <a href="https://codepen.io/AlexanderSplat/pen/YzNZKZG" rel="nofollow noreferrer">here</a>, but then what's the point of using Bootstrap?).</p>
  <p>I've looked at the Bootstrap 5 CSS, and as far as I can see, the <code>nav-link</code> elements are only ever addressed as classes, which should be simple to overrule, right?</p>
  <p>How I thought it would work:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nav-link {
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;
  &lt;li class="nav-item"&gt;
    &lt;a class="nav-link" aria-current="page" href="#"&gt;HOME&lt;/a&gt;
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Resulting in red letters.</p>
  <p>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:</p>
  <p>1.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nav-link {
    color: red !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;
  &lt;li class="nav-item"&gt;
    &lt;a class="nav-link" aria-current="page" href="#"&gt;HOME&lt;/a&gt;
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>2.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#navhome {
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;
  &lt;li class="nav-item"&gt;
    &lt;a class="nav-link" id="navhome" aria-current="page" href="#"&gt;HOME&lt;/a&gt;
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>3.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nav-link2 {
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;
  &lt;li class="nav-item"&gt;
    &lt;a class="nav-link2" aria-current="page" href="#"&gt;HOME&lt;/a&gt;
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>What am I missing here?</p>