Navbar background-color does not change

as posted on the title, I can't change the background-color of my navbar. But I'm sure that my external css is working.

HTML CODE:

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
      <div class="container">
        <a class="navbar-brand" href="{% url 'index' %}"><img src="{{logo.image.url}}" alt="no image provided" style="max-width: 10rem; max-height: 10rem;"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="{% url 'index' %}">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'accounts:register' %}">Sign Up</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'cms' %}">Manage Web Content</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'admin:index' %}" tabindex="-1">Admin Page</a>
            </li>
          </ul>
        </div>
      </div>
      
        <ul class="sample">
          <a class="nav-link" href="#" tabindex="-1">sample</a>
        </ul>
</nav>

EXTERNAL CSS:

.navbar {
    background-color: black;
}

.sample .nav-link {
    color: red;
}

And I will include a picture of my navbar just for reference. Take note of the ul tag with sample label in it, located at the right part of the navbar. It turned out to be red. That's how I knew the external CSS is working. Any ideas why is this happening?

SOLUTION: thanks to those guys who answered in the comment section. And it seems that the problem is one of these classes navbar-light orbg-light , these are default classes from bootstrap framework. So, in order for my external css to work is I needed to put !important to override those 2 classes mentioned above:

.navbar {
    background-color: black !important;
}

.sample .nav-link {
    color: red;
}