title: Bootstrap CSS isn't being overridden by Custom css
body: <p>So I'm using bootstrap to make a navbar and used their example navbar as my foundation.
  I fiddled with the bootstrap file to make it so that the navbar will collapse at 995px instead of 768px. Now because of that my navbar's button stays at the left side until the window size is below 768px.
  I found that if I changed</p>
  
  <pre><code>@media (min-width: 768px) {
      .navbar-header {
          float: left;
      }
  }
  </code></pre>
  
  <p>to</p>
  
  <pre><code>@media (min-width: 995px) {
      .navbar-header {
          float: left;
      }
  }
  </code></pre>
  
  <p>then it works fine.</p>
  
  <p>However I put </p>
  
  <pre><code>@media (min-width: 995px) {
      .navbar-header {
          float: left;
      }
  }
  </code></pre>
  
  <p>into a custom.css and loaded it after bootstrap.css and no change occurred. My custom.css didn't override the boostrap.css. I would like to refrain from changing the bootstrap.css.</p>
  
  <p>This is what the navbar looks like right now
  <a href="https://i.stack.imgur.com/Xv2vA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xv2vA.png" alt="enter image description here"></a></p>
  
  <p>This is what it should look like
  <a href="https://i.stack.imgur.com/b6jhn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b6jhn.png" alt="enter image description here"></a></p>