Bootstrap navbar brand left margin not overriding
<p>I'm trying to override the left margin of the bootstrap class <code>navbar-brand</code> like so</p>

<pre><code>.navbar .navbar-brand{
  margin-left: 15px;
  background: url("../img/logo.png") no-repeat;
}
</code></pre>

<p>Basic stuff right ? Well as I remember from my training is the class that is last in the list of classes, it's properties get set. Now in this case it just won't take my override in my <code>main.css</code> file. I've tried different selectors, different positions in the class list. I even tried different class names. As it is like always in CSS I'm probally missing something tiny small I can't seem to think of now or maybe it's something major I have never encountered before.</p>

<p><a href="https://i.stack.imgur.com/DCnux.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DCnux.png" alt="enter image description here"></a>
<a href="https://i.stack.imgur.com/K7Q45.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K7Q45.png" alt="enter image description here"></a></p>

<p>Anyway can someone point me in the right direction here ? This has been driving me nuts for the past 2 days now. I'll attach my files below.</p>

<p><a href="http://pastebin.com/NHHtRfJW" rel="nofollow noreferrer">main.html</a> &amp;
<a href="http://pastebin.com/paMKG3VJ" rel="nofollow noreferrer">main.css</a></p>