Media Query rule is not overriding original-CodePudding

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?

/* 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  */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Technical Documentation Page</title>
</head>
<body>
  <nav id="navbar">
    <header>
      <h1>JS documentation</h1>
    </header>
    <ul>
      <li><a id="nav-link" href="#introduction">Introduction</a></li>
      <li><a id="nav-link" href="#what_you_should_already_know">What you should already know</a></li>
     
    </ul>
  </nav>
  <main id="main-doc">
  </main>
    
</body>
</html>

CodePudding user response：

It happens because #navbar header h1 has a higher priority than #navbar h1. You've to change one of them. If they are both the same, the last declarated will be used.