TheRevan

Удобство для себя = без сетки, без фремворка(кроме бекенда, там намного проще и лучше делать с фреймворком), с использованием БЭМ + любой препроцессор и настроенный проект через gulp

только footer

$('.block-btn').click(function(){
  var info = $(this).closest('.block-info').find('.block-food').text();
  $('.out').val(info);
})

а причем тут флексы? просто у div с меню следующие свойства:

.menu{
position:fixed;
left:-300px;
top:0;
bottom:0
z-index: 100;
background-color:#000;
width:300px;
transition: left ease-in-out .3s
}
.menu.active{
left: 0px
}

Проблема с элементом:
p.border{
}
- он вылезает за границы экрана
Вот смотрите:

1. Много весит
2. Лишнии файлы стилей и скриптов
3. Часто чтобы сделать чтото довольно простое, приходиться использовать сетку, когда без нее это сделать раза в 3 проще.
4. Бутстрап застолбил кучу названий для классов
5. Нет поддержки БЭМ

Единственное что приходит на ум это text-indent с отрицательным значением, но один фиг br вставить нужно будет
Пример: https://codepen.io/anon/pen/oEedYb

Тут есть 2 варианта:
1 - сделать для : .header__nav-items эту тень и убрать тень у .header__shadow:after
2 - сделать .header__shadow position:relative и background-color: #fff