Flexbox не придает элементам одинаковую ширину ⇐ CSS

[Гость]

Попытка создания гибкой навигации, содержащей до 5 элементов и всего 3, но ширина не распределяется поровну между всеми элементами.
Скрипка
Урок, по которому я моделирую это: http://www.sitepoint.com/Response-fluid ... ation-css/

* { размер шрифта: 16 пикселей; } .tabs { максимальная ширина: 1010 пикселей; ширина: 100%; высота: 5рем; нижняя граница: сплошная 1 пиксель серого цвета; маржа: 0 0 0 6,5бэр; дисплей: стол; макет стола: фиксированный; } .tabs ул { маржа: 0; дисплей: гибкий; гибкое направление: строка; } .tabs уль ли { гибкий рост: 1; стиль списка: нет; выравнивание текста: по центру; размер шрифта: 1.313rem; фон: синий; белый цвет; высота: наследовать; слева: авто; вертикальное выравнивание: сверху; выравнивание текста: по левому краю; отступы: 20 пикселей 20 пикселей 20 пикселей 70 пикселей; граница-верхний левый радиус: 20 пикселей; граница: сплошная синяя толщиной 1 пиксель; курсор: указатель; } .tabs ul li.active { фон: белый; цвет синий; } .tabs ul li:before { содержание: ""; [*]Пицца [*]Куриный суп с лапшой [*]Арахисовое масло [*]Рыба