Issues connecting css to html

I’m having issues connecting my nav tag in html to the class selector tag for the nav item in css. can anyone explain why it isn’t lining up/ working?

  <a href="nav-item">About</a>
 <a href="nav-item">Blog</a>
 <a href="nav-item">Shop</a>
<a id="contact" href="#">Contact</a>

this is the css that corresponds to this… it should make the nav bar with a gray background but it’s not working.

.nav-item {
  padding: 5px 20px;
  background: lightgray;
  border: 1px solid gray;
  margin: 10px;
  border-radius: 5px; 
  display: inline-block;
  color: black; 

.nav-item:hover {
  background: #eeeeee;

#apply { 
background: #12572;
color: white;

It is because you mistakenly give value to href instead of class name. for instance,

  <a href="#about" class="nav-item">About</a>
1 Like

ah! completely makes sense! thank you :smile: