I am using V3.3.6 of Bootstrap and I wanted the background-color of my Ņavbar to be a dark red. In addition to the standard Bootstrap CSS, I have my own css as shown below:

```

    .navbar-inverse {
      background-color: #9E1B34;
    }

    .navbar-inverse .navbar-nav > li > a,
    .navbar-inverse .navbar-brand {
      color: white;
    }
    .navbar-inverse .navbar-nav > .active > a,
    .navbar-inverse .navbar-nav > .active > a:hover,
    .navbar-inverse .navbar-nav > .active > a:focus,
    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus,
    .navbar-inverse .navbar-brand:hover,
    .navbar-inverse .navbar-brand:focus  {
      color: #9E1B34;
      background-color: white;
    }

```

The website is <http://www.alkd.org.au>

When hovering over each navbar item I get my correct styling of Red text and White background. But the background-color of the standard navbar is black, not dark red even though I have overridden the .navbar-inverse background-color. The browser developer tools shows that my css is the 'winning' one yet seems to be ignored. I cannot find anything in the developer tool that shows me where the black is coming from. I do have a javascript that adds the active class to the active page which sets the text color to red (which is working), but the background color should be white. Once again the developer tools shows that the active page background-color is white but it is being displayed as black.
Where is that black coming from? and whats the best way to get rid of it please?