Dima Polos

Ордер задавать - лишнее.
Дивы вокруг списков тоже лишнее, зачем?:)

<header class="header">
    <ul class="left">
      <li> Item </li>
      <li> Item </li>
    </ul>
    <ul class="right">
      <li> Item </li>
      <li> Item </li>
    </ul>
</header>

.header{
   display: flex;
   justify-content: space-between;
}

Как бы все.

Я живу)
Зачем они нужны? Быстрее помогают иногда сделать работу.
На флексах все не плохо? Ну да, но они не решают всех вопросов, например та же сетка.
Еще + или иногда -, что в фреймворке, типа бутстрапа, есть много готовых решений на js. Плюс, что все и сразу есть. Минус, не все это нужно и увеличивает вес страницы и может тормозить.

Пагинация нужна, если количество данных слишком большое для одной страницы.

Данные хранит сервер и он знает и решает, сколько отдать данных. Именно сервер знает, по какому url'у лежит следующая часть данных и он же знает на какой странице сейчас пользователь, точнее он может определить.

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

Вся эта музыка работает так:
а) с точки зрения верстки: надо создать класс, тот же current, который изменить стиль ссылки текущей страницы;
б) с точки зрения бэкенда: код, который будет выводить верстку пагинации из шаблона, должен определить какую страницу запрашивает сейчас пользователь и в вывод верстки добавить еще класс current, если адреса совпадают.

ВЫВОД: только через CSS такое сделать нельзя, так как о всех страницах пагинации ведает сервер.

В codepen надо owl подключить тоже через настройки js, а не линком в разметке. Я подключил и заработало.

В элементе picture обязательный тег img - как фолбек.