HTML
<header>
<div class="logo">
<img src="#" id="header-img" alt="airbnb logo">
</div>
<nav id="nav-bar">
<ul style="list-style: none" >
<li><a href="#home" class="nav-link">Home</a></li>
<li><a href="#services" class="nav-link">Services</a></li>
<li><a href="#features" class="nav-link">Features</a></li>
<li><a href="#pricing" class="nav-link">Pricing</a></li>
<li><a href="#team" class="nav-link">Team</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
**<li><a href="login" id="login">Try it free</a></li>**
** </ul>**
</nav>
</header>
CSS
header{
position: fixed;
background-color: white;
top:0;
height: 75px;
padding: 0 70px;
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
}
ul{
display: flex;
justify-content: flex-start;
}
li{
padding: 0 15px;
}
a{
text-decoration: none;
}
#login{
position : absolute;
margin-left: 300px;
border:1px solid #fff;
border-radius: 2em;
padding: 5px 20px;
color: white;
background-color: #ff4d4d;
}
when I trynna add a new css rule for when I hover over the link with the id =“login” it doesnt work Plz tell me why and them sae thingd with 2 other links in my webpage