koanvl

Это смотря, какой результат должен быть при клике на кнопку "фильтр". Если фильтр просто разворачивается вне хедера, то сделать кнопку в шапке и контролировать видимость кнопки медиа-запросами, а дальше по клику контролировать видимость фильтра, там где он физически есть. Если фильтр должен разворачиваться в хедере, то с кнопкой та же фигня, а вот для самого фильтра appendChild или insertBefore вам в помощь

Вам может помочь абсолютное позиционирование псевдоэлемента.
li.active
position: relative
li.active:before
content: ""
width: /*ширина капли*/
height: /*высота капли*/
background-image: url("урл картинки")
position: absolute
top: -n /*высота капли + отступ*/
left: 50%
transform: translateX(-50%)
Алгоритм такой. Не видно, что у вас там по стилям. Может подшаманивать под себя немного нужно будет значения абсолютных позиций.

Глядя на ваш код, можно сделать вывод, что вы не совсем понимаете, по какому принципу работает сетка Bootstrap. Вам нужен адаптив или пропорциональное уменьшение страницы? Если пропорциональное уменьшение страницы, то вам нужно жестко зафиксировать ширину контейнера Bootstrap (через important) и всем колонкам присвоить только col-xs-...(что у вас там ). Но есть в этом нюанс, что оно будет все такое мелкое и не юзабельное на мобильных утройствах, т.к. это не адаптив. Да и смысл тогда юзать бут? С таким же успехом можно сделать верстку фиксированную и не париться.
Если вы хотите именно адаптив или респонсив, то необходимо вникнуть в принцип работы сетки Bootstrap и дополнительно контролировать все медиа-запросами.

У вас проблемы из-за табличного представления блочных элементов. Вот оно все и бьет.
Добавьте .content .articleArea .row>article свойства max-width: 1280px, box-sizing: border-box
И уберите у .content .articleArea.table .rightBlocks свойство padding
Все становится на место. Дальше, я думаю, разберетесь сами.
P.S. Это вы поддерживаете ресурс или ваша разработка?

Решала такую проблему на 3 буте при помощи js
var minHeight = 0;
$(".offer-box").each(function () {
var height = parseInt($(this).height());
if(height > minHeight) {
minHeight = height;
};
});
$(".offer-box").height(minHeight);

Какой вы бутсрап используете? Если , то там за респонсив изображений теперь отвечает класс img-fluid, а не img-responsive. Изучайте мануалы, ваш подход к верстке вкорне неверный

Присваиваю классы заголовкам на живых проектах. У СЕО-специалистов вопросов не возникает.

Письма верстаются таблицами, стили прописываются в тег через атрибут style . Многие почтовики не то, что классы не воспринимаю, они свойство margin не воспринимают, или перекраивают так, как им нужно.

Используйте margin для указания отступов между квадратами. padding - это внутренний отступ. который входит в размер элемента. Вы указали ширину и высоту ссылки 100%, вот она и разместилась на ширину всего квадарата, учитывая его паддинги. А вообще, используйте flexbox и будет вам счастье!