Сергей delphinpro

Честно говоря не знаю, что там за косяк в IE.
Но в любом случае IE11 сейчас уже не стоит того, чтобы лишний раз напрягаться.
Сделайте к примеру так:

.element::before {
  --this-font-size: 2em;
  font-size: 36px; // Для ишака
  font-size: var(--this-font-size);// Для нормальных браузеров
}

IE не понимает переменные, поэтому использует определение в пикселях.

ЗЫ
Можно не определять переменную, для краткости, и использовать параметр по умолчанию:

.element::before {
  font-size: 36px; // Для ишака
  font-size: var(--fz, 2em);// Для нормальных браузеров
}

Сначала получаем координаты желтого блока в документе https://learn.javascript.ru/coordinates-document

Потом слушаем onscroll на window и когда window.scrollTop будет равен координате Y блока — блок будет находится вверху экрана.

Следует учесть вариант, что строгое равенство не будет выполнено. Лучше делать сравнение ">=" и выполнять "доводку" блока при блокировке скролла.

https://developer.mozilla.org/ru/docs/Web/CSS/::before

В CSS, ::before создаёт псевдоэлемент,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства content. По умолчания является инлайновым.

Например, так:

https://codepen.io/anon/pen/oRyVep

fullpage.js

.element:first-child:last-child {
    display: none;
}

Расшифровка: если элемент является одновременно первым и последним, то он единственный.

ihabia, Класс не может разрастаться до безобразия из-за вложенности,
потому что вложенность всего лишь одна Блок -> Элемент.

В вашем случае у вас есть косяк в разметке.
1. Логотип это вполне самостоятельный блок.
2. Поиск тем более.
3. Вкладывать прослойки в блоки в принципе допустимо, это не косяк, но когда речь идет лишь о декорации, то вряд ли стоит.

Итого имеем четыре блока (ну и контейнер, как сущность модульной сетки):

<header class="header-section">
    <div class="container header">
        <div class="header__logo logo">
            <h2 class="logo__title">APP Design</h2>
            <p class="logo__description">Free PSD Website Template</p>
        </div>
        <form action="" class="header__search search-form">
            <input type="text" placeholder="" class="search-form__field">
            <button class="search-form__button">Search</button>
        </form>
    </div>
</header>

.header-section {}

.header {
  &__logo {}
  &__search {}
}

.logo {
  &__title {}
  &__description {}
}

.search-form {
  &__field {}
  &__button {}
}

Достаточно простая разметка, простые стили, независимые блоки.

Вторая секция более-менее нормально размечена.

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

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

Как и сказал выше — оберните 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/