title: Media Query rule is not overriding original
body: <p>I made a media query to override the '#navbar h1' and everything works as expected except for the border rule, which will not disappear on smaller size.
  I made sure to place the media query below the original rule so i'm really confused for why it isn't working.
  Any ideas?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Navigation bar  */
  #navbar {
    border-right: solid;
    border-color: rgba(0, 22, 22, 0.4);
    min-width: 300px;
  }
  
  #navbar header h1{
    margin-top: 0;
    margin-bottom: 0;
    padding: 20px;
    font-size: 1.8rem;
    border: 1px solid rgba(0, 22, 22, 0.4);
    text-align: center;
  }
  
  /* 800px media query */
  @media (max-width: 800px) {
    body {
      display: block;
    }
  
    #navbar {
      height: 300px;
      overflow: hidden;
    }
  
    #navbar h1 {
      width: 80%;
      margin: 0 auto;
      border: none;
    }
  }
  /* end of 800px media query. */
  /* Navigation bar end  */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;title&gt;Technical Documentation Page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;nav id="navbar"&gt;
      &lt;header&gt;
        &lt;h1&gt;JS documentation&lt;/h1&gt;
      &lt;/header&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a id="nav-link" href="#introduction"&gt;Introduction&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a id="nav-link" href="#what_you_should_already_know"&gt;What you should already know&lt;/a&gt;&lt;/li&gt;
       
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;main id="main-doc"&gt;
    &lt;/main&gt;
      
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>