Как равномерно заполнить ширину? ⇐ CSS

[Anonymous]

Я хотел разместить границу, разделяющую элементы, на простой панели навигации. Но граница появляется не в том месте.

Код: Выделить всё

* {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

ul {
list-style: none;
}

nav ul {
display: flex;
flex-direction: row;
justify-content: space-evenly;
border: 1px solid #100;
}

nav {
background: bisque;
}

li a {
text-decoration: none;
color: #100;
line-height: 3rem;
font-size: 2rem;
}

li {
border-right: 1px solid #100;
}

Код: Выделить всё

[list]
[*][url=go.html]Home[/url]
[*][url=go.html]Extra[/url]
[*][url=go2.html]Food[/url]
[*][url=go2.html]Drinks[/url]
[*][url=go2.html]About[/url]
[/list]

Мне нужна боковая граница, которая появляется прямо посередине всех пробелы между элементами.

Подробнее здесь: https://stackoverflow.com/questions/791 ... dth-evenly