I'm trying to change the color of the link with the class "navbar-brand" in my Bootstrap website. No matter how I structure my css selector I can't seem to change the text color. However, I know the css is being loaded because I'm able to change the background color of the navbar. Here is the shortened code:

My index.html:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Foobar Brand</a>
        </div>
      </div>
    </div>
  </body>
</html>

```

My main.css:

```
    // change the color of the navbar to a dark blue
    .navbar {
        background-color: #3c4c66;
    }

    // some of the selectors I've tried to get the text to be white.
    // why are they not working?
    .navbar-brand {
        color: white;
    }

    .navbar-header a {
        color: white;
    }

    a {
        color: white;
    }

```

End result: a dark blue bar with the gray text that came with the default navbar. Thanks for your help.

Edit: the similar question [here](https://stackoverflow.com/questions/24420080/change-navbar-text-color-bootstrap) didn't help me. I was able to change the elements of the navbar-nav, but not the navbar-brand.

Edit 2:
In response to Abhinav Guaniyal's comment, I inspected the element in Firefox. Indeed, somehow the .navbar-brand rule in Bootstrap is overriding (sorry if that is the wrong term) the .navbar-brand in my css file. Why is this? Shouldn't my css file override Bootstrap's since I linked main.css after Bootstrap?