Issues connecting css to html

HTML-CSS
1

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?

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

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;
}
2

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

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

ah! completely makes sense! thank you :smile: