Скачет содержимое flex

Извиняюсь. Переделал немного.

Вот пример https://codepen.io/gluhovalexey/pen/OBjzGY

Здесь есть шапка и элемент из 3 частей, который включает списки ul слева и справа и div с контентом посередине, находящиеся в flex-contaner

Суть вопроса если убрать элемент со списками ul, то ширина шапки уменьшится. Тоесть если со страницы сайта в которой есть ul как на примере перейти на другую, где списков нет, то шапка сайта и другие постоянные элементы будут "прыгать" из за изменения размеров.

<div class="flex-container">
    <div  class="flex-row header">
        <img src="https://d.radikal.ru/d17/1810/b9/7bd548daa75f.png">
        <img src="https://d.radikal.ru/d17/1810/b9/7bd548daa75f.png">
        <img src="https://d.radikal.ru/d17/1810/b9/7bd548daa75f.png">
    </div>
    <div class="flex-row content">
        <div class="left">
            <ul>
                <li class=""><a href="" target="_blank">Пункт a</a></li>
                <li class=""><a href="" target="_blank">Пункт b</a></li>
                <li class=""><a href="" target="_blank">Пункт c</a></li>
                <li class=""><a href="" target="_blank">Пункт d</a></li>
                <li class=""><a href="" target="_blank">Пункт e</a></li>
                <li class=""><a href="" target="_blank">Пункт f</a></li>
                <li class=""><a href="" target="_blank">Пункт j</a></li>
                <li class=""><a href="" target="_blank">Пункт h</a></li>
            </ul>
        </div>
        <div class="center">
            Какой то контент посередине
        </div>
        <div class="right">
            <ul>
                <li class=""><a href="" target="_blank">Пункт 1</a></li>
                <li class=""><a href="" target="_blank">Пункт 2</a></li>
                <li class=""><a href="" target="_blank">Пункт 3</a></li>
                <li class=""><a href="" target="_blank">Пункт 4</a></li>
                <li class=""><a href="" target="_blank">Пункт 5</a></li>
                <li class=""><a href="" target="_blank">Пункт 6</a></li>
                <li class=""><a href="" target="_blank">Пункт 7</a></li>
                <li class=""><a href="" target="_blank">Пункт 8</a></li>
            </ul>
        </div>
    </div>
</div>

Стили:

.header {
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}
.header img {
    width: 32%;
    margin: 1px;
    height: 100%;
}
.flex-container {
  display: flex;
  margin: 10px auto;
  max-width: 1300px;
  flex-wrap: wrap;
  flex-direction: column;
}
.flex-row {
  display: flex;
  margin-bottom: 50px
}
.content {
    flex-direction: row;
    width: 100%;
}
.content .left {
    flex: 2;
    width: 20%;
}
.content .center {
    flex: 4;
    justify-content: center;
    width: 60%;
}
.content .right {
    flex: 2;
    width: 20%;
}