Question: Live example: <https://jsfiddle.net/qnx8btw5/>

The `<li>` in my navbar-container are moving while I hover over the other elements. How do I stop this from happening? 

I know that I could set the size while hovering to a size that would stop this from happening, but in my opinion that is not the best solution to this problem.

Answer: 
I think this happen because you set border-bottom when you hover on your list-item.

you can set transparent border by default to your list item like below

```
#navbar-container ul li{
  border-bottom:3px solid transparent;
}

```

using this your your navbar will not move.
Add the same border which you have on `hover` as a `transparent` border by default. With this the styling doesn't get changed between "default" and hover.