Сергей delphinpro

В большистве случаев, когда не нужны всякие навороченных анимации и эффекты открытия и достаточно простого свайпа я решаю эту проблему упрпавлением видимости меню через css.

Кнопка не переключает меню, а переключает класс.

$('.menu-button').on('click', function(){
  $('.menu').toggleClass('open');
});

.menu {
  display: none;
  
  @media(max-width: 767px){
    &.open { display: block; }
  }
}

При необходимости решения в javascript имеет смысл воспользоваться (IE11+) интерфейсом matchMedia вместо прослушивания ресайза.

new Vue({
    el: '#app1',
    //...
});
new Vue({
    el: '#app2',
    //...
});
new Vue({
    el: '#app3',
    //...
});

tosster22,

Нужно padding оставить такой же, а при наведении добавить рамку которая в 10px

Подойдите к вопросу иначе. Рамка всегда есть, но ее не видно.
При наведении, рамка меняет цвет и ее видно.
Добавив transition: border-color 0.3s; сделаем смену цвета плавной.

a {
/*  padding: 20px; // Было */

  padding: 10px;
  border: 10px solid transparent;
}

a:hover {
  border-color: red;
}

Я конечно не буду ковыряться в вашей простыне не относящегося к делу кода. Это вы должны выделить проблему и сделать короткую песочницу.
К тому же в вашем коде вообще нет ни одного медиазапроса. Ваш medai.css понятное дело недоступен.
К тому же песочница оформелена неправильно, там не нужны теги служебные теги head и все что внутри, а внешние ресурсы подключаются через настройки пена.

Просто покажу, что всё работает как и должно.
https://codepen.io/anon/pen/zQPQYz

При клике на документ нужно смотреть на целевой элемент, если клик был на закрываемом элементе (или внутри его, если там есть вложенные элементы), то закрывать не нужно в этом обработчике.
https://codepen.io/anon/pen/oRWQRP

Раскуривайте: https://codepen.io/anon/pen/JqNmGP?editors=1010

Вместо тысячи слов: Центрирование в CSS полное руководство

.link -> onclick -> $('slider').slick('slickGoTo', indexSlide)
https://github.com/kenwheeler/slick/#methods

Да какие нафиг признание, рейтинг, удовольствие???
Серьезно?

Люди решают свои задачи и выкладывают решения в открытый доступ.
В первую очередь "решают свои задачи" с помощью созданных инструментов, а уж во вторую всё остальное...

Как и сказал выше — оберните header в row, header дать ширину 100%
Внутри еще есть row, его нужно обернуть в col-12
https://codepen.io/anon/pen/NVRvmV?editors=1000

UPD
Я немного подзабыл классы бутстрапа. Вот так видимо будет "правильнее" (класс col для header) https://codepen.io/anon/pen/xNEXqp?editors=1100

Вам в любом случае нужно знать размеры картинки. Это можно узнать с помощью php на сервере. Либо для использования в атрибутах, что вам не подходит, либо так как опишу ниже.

Делаем обертку для картинок:

<div class="img-placeholder-responsive">
  <div class="img-placeholder-responsive__box">
    <img src="" alt="">
  </div>
</div>

.img-placeholder-responsive {
  &__box {
    position: relative;
    width: 100%;
    height: 0;
    box-sizing: border-box;
    padding-bottom: percentage(3/4); // default aspect ratio

    // Можем этот плесхолдер стилизовать как-то, пока картинка не загружена
    background: gray;
    // Можем надпись добавить
    &::before {
      position: absolute;
      content: 'Картинка загружается...';
    }

    > img {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }
  }
}

Здесь использован вложенный блок, а не псевдоэлемент для распорки, так как нам нужно передавать aspect из php.

Используем:

<?php
// Получаем размер картинки
$width = getImageSize();
$height = getImageSize();
?>
<!-- Вставляем в разметку -->
<div class="img-placeholder-responsive">
  <div class="img-placeholder-responsive__box"
       style="padding-bottom: <?= $height / $width * 100 ?>%"
  >
    <img src="" alt="">
  </div>
</div>

Наслаждаемся результатом!

PS. Если у вас соотношение сторон изображений величина постоянная для всех, то от получения размеров и вставки их в разметку можно отказаться, и задать дефолтный aspect в css (в примере есть).
PPS. Если aspect различается незначительно, можно его также вшить в css и задать картинке стиль object-fit: cover (или contain)

Существуют понятия поток элементов в документе и контекст форматирования. Строчные располагаются в потоке слева направо, блочные — сверху вниз. Float заставляет другие элементы в потоке обтекать указанный. Именно это вы наблюдаете в первом примере.
Определенные свойства создают новый контекст (overflow, display с некоторыми значениями и другие). В новом контексте создается свой поток элементов. Вы это видите на втором примере.

Какую же хрень пишут в ответах, флексы, гриды... Вообще не к месту.
Не могу на это смотреть. Держите:

max-width означает "до" (включительно)
min-width означает "от" (включительно)

т.е. у вас стили применяются на ширине браузера до 992px включительно
Начиная с 993 эти стили отключаются.

max-device-width: 1400px
означает "размер дисплея до 1400". Дисплея (устройства), не браузера.

В ваших стилях сложно разобраться. Приведите код в порядок.

У вас все работает. Просто есть обертка внутри (сслыка). Сделайте ей display: flex; flex-direction: column; и растяните текстовую часть flex-grow: 1;

https://jsfiddle.net/2zq7p4sg/

grid-auto-flow: