Проблема поля элемента списка Angularjs Объединение элементов ng-repeat со статическими

Я хочу создать горизонтальный список, сгруппировав некоторые элементы, хранящиеся в массиве, вместе с некоторыми статическими элементами, которые будут непосредственно вставлены в html. Что-то вроде этого:

<div class="list-container push-down" ng-controller="ListController">
    <ul>
        <li>Home</li>
        <li ng-repeat="i in items">{{i.label}}</li>
        <li>Blog</li>
    </ul>
</div>

Я объявил свою переменную items в своем контроллере:

myApp.controller("ListController", function ($scope) {
$scope.items = [{
        id: 1,
        label: "News"
    }, {
        id: 2,
        label: "Services"
    }, {
        id: 3,
        label: "Products"
    }];
});

и создал несколько правил css для правильного отображения горизонтального списка:

.list-container {
    width: 100%;
    background-color: #ff9900;
}

.list-container ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.list-container ul li {
    padding: 5px;
    margin-right: 1px;
    background-color: #f2f2f2;
    color: #000;
    display: inline-block;
}

Тем не менее, похоже, что ng-повторяющиеся элементы каким-то образом разделены остальными элементами, и добавлен некоторый интервал, нарушающий правило поля в 1 пиксель.

Итак, как я могу это исправить?

Я знаю, что добавление статических элементов в мою модель - правильный путь, но мне кажется странным, что даже если я использую инструменты разработчика, чтобы узнать, какое правило CSS генерирует этот интервал, я не могу найти его.

Вот скрипта