AlexKeller

И что тут такого нереально сложного?

<div class="main">
  <div class="sidebar"></div>
  <div class="container"></div>
</div>

В обычном состояние flex-direction для враппера row, в адаптации - column

Странно, что перезагрузка gulp на что-то тут влияет.
Все импорты CSS-файлов должны идти в начале файла: https://www.w3.org/TR/CSS21/cascade.html#at-import

https://jsfiddle.net/7n2kxfwj/
Если сделать текст в правой колонке короче, то она займет min-width. А с длинным текстом будет max-width

Если нужно, чтобы и при коротком тексте правая занимала max - можно добавить ей flex: 1 1 auto;

Чтобы не прыгало меню, задайте бордер по умолчанию для пунктов меню:
border: 5px solid transparent;
Или, если не добавлять дефолтный бордер, на :hover добавить марджинов:

.page-header__menu-item-open:hover {
  ...
  margin-top: -5px;
  margin-bottom: -5px;
}

Кнопки и подобные - некрупные - элементы дизайна стараюсь делать CSS'ом...
Во-первых, обычно меньше весит...
Во-вторых, если завтра придут и скажут, что мой зеленый недостаточно красный, то в Firebug'е подобрать и заменить цвет будет проще...
Ну и в-третьих, произвольный размер шрифта, все тянется и занимает ровно столько места, сколько требуется...

Попробуйте DIV-у с картинкой прописать background-size: 100%:
jsfiddle.net/bHeJC/12/

Не фонтан, конечно, но если подобрать картинки немного похожие по пропорциям с параллелограммом, но не так уж и плохо…