Add padding without moving the element

When I hover on an padded element it moves a bit how can I make it stable

<nav>
  <ul id="nav-ul">
    <li ><a href="#" class="nav-item">Profile</a></li>
    <li ><a href="#" class="nav-item">Home</a></li>
    <li ><a href="#" class="nav-item">Friends</a></li>
    <li ><a href="#" class="nav-item">Notifications</a></li>
  </ul>
</nav>

And this is the css code

nav ul li {
    float: right;
    list-style: none;
    padding: 15px;
    padding-left: 40px;

}
.nav-item{
    color: #fff;
    text-decoration: none;
}
.nav-item:hover {
    background-color: #2c3e50;
    padding: 5px;
}