the border and margin is not working in the nav

Question

the html i am trying to style is
<nav>
<ul>
<li id="home"><a href="#">home</a></li>
<li id="HMS"><a href="#">handy man services</a></li>
<li id="SNM"><a href="#">SickNoMore</a></li>
</ul>

the css is after the explanation

the border keeps jumping around and moving to the left of the home button. The other buttons lose their margin when i hover over the home button. Another thing is the hover activation is too far left I don't know why. lastly the color won't change when I hover over it.
nav{
background-color:#808080;
border-style:ridge;
border-width:5px;
border-radius:10px;
opacity:.7;
}
nav ul{
box-shadow: inset 0px 0px 1px;

}
nav ul li{
display: inline-block;
border: none;
}
nav ul li a {
margin-left:150px;
padding: 10px;
color: #000000;
text-decoration:none;
font-size:20px;
}
#home:hover{
margin-left:40;
width:100px;
border-radius: 10px;
background-color: #ffffff;
color:#808080;
}
#HMS{}
#SNM{}

Thank you

</nav>

Answer 1

You should put the code on playground and share the link instead of putting code in question.

Answer 2

Yes Raj Chhatrala is correct