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: 
It happening due to border adding on hover. Just set border with transparent color to element `<li>` default.

Result
<https://jsfiddle.net/kwvLuxgs/>
```
add border bottom in li
css.
$DefaultFont: "Roboto", "Open Sans";
$ColorStandard: #212121;
$ColorSubordinate: #A7ADB6;
$FontSizeMedium: 13.5pt;

#header-container {
    position: absolute;
    top: 0;
    z-index: 999;
    margin-top: 0;
    background-color: white;
}

#navbar-container {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: $ColorSubordinate;

    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: $ColorSubordinate;

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: white;

        li {
            float: left;
            color: $ColorStandard;
            text-align: center;
            margin-left: 12.5px;
            margin-right: 12.5px;
            margin-bottom: 12.5px;
            margin-top: 12.5px;
            border-bottom:3px solid transparent;
            font-size: $FontSizeMedium;
            text-decoration: none;
            cursor: pointer;
            a {
              text-decoration: none;
              color: $ColorStandard;
            }
            &:hover {
                border-bottom-color: $ColorStandard;
                border-bottom-style: solid;
                border-bottom-width: 3px;
                width:100px;
            }
        }
    }
}

#data-container {
    margin-top: 20px;
    z-index: 1;
}

```