my scss is not overriding framework css UIkit

I'm having problems using scss to override framework css rules. If I add !important, everything works fine... What should I do get this working without using that rule?
.html code:

<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
</nav>

.scss code:

.uk-navbar-container {
background: #383c4a;
}

Again, if I add !important, my navbar changes color...

Solution

You problem is that .uk-navbar-container:not(.uk-navbar-transparent) is more specific than your .uk-navbar-container rule. Another point is that normally you don't want to override framework's rules just for one fix, because it will affect your entire codebase.

One way to fix your issue is to add a more specific rule, e.g.

.uk-navbar-container.--grey {
    background: #383c4a;
}

... and then in html

<nav class="uk-navbar-container --grey" uk-navbar>

This will do the trick but only if the rule is defined after .uk-navbar-container:not(.uk-navbar-transparent), because they have the same specificity and the last one will be applied. I attached a snipped to demonstrate how it works.

Read more about specificity to get better understanding of the problem, and also you might want to check out this article with examples with not.

body {
  font-size: 22px;
}
.test:not(.another) {
  color: blue;
}
.test {
  color: red;
}
.test.green {
  color: green;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="test">I'm blue</div>
    <div class="test green">I'm green</div>
  </body>
</html>