'html cannot display when render

I expect a custom navbar where I set nav background to black and set a tag to display inline-block and padding 10. But, HTML do not render anything when I add css. Though, It is rendering when I remove CSS. Please, can someone explain why and how can to make it work?

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.topvav {
  width: 100%;
  background: #000;
  border: 1px solid #000;
}
a {
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 10px;
}
a:hover {
  display: inline-block;
  /* float: left; */
  background: white;
}
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="test.css" />
  </head>
  <body>
    <div class="topnav" id="myTopnav">
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>

  </body>
</html>
javascripthtmlcssrenderdisplay


Solution 1:[1]

Typo: In the CSS file replace .topvav with .topnav

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions