Navigation Moves On Bold Hover

When I hover my navigation, it moves about 5 px to the right. The hover is set with a font-weight: bold. So i know that's the bold part that's the problem. If i ad a margin-right

Solution 1:

#nav ul li {
  display: inline-block;
  position: relative;
  border-right: solid 1px #e1e1e1;
  margin: 0px;
  width: 100px;
}

Giving each link a certain width will fix this issue... Use % for a more responsive design.