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>Typo: In the CSS file replace .topvav with .topnav