Что делать, если div перекрывает событие другого div'a?

ZerdoX-x,

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

Можно.
Для них есть pointer-events: auto;

это я о том, что для решения проблем лучше использовать те инструменты, которые для этого предназначены

Да, я тоже всегда об этом.
Решение нужно выбирать исходя из всей задачи и окружения. Мы не знаем ни того ни другого.
Pointer-events это всего лишь один из вариантов решения такого рода задач.

Но описание в вопросе сильно хромает, даже в части про то, у кого больше z-index.
Так что, без нормальной песочницы спорить вообще не о чем.

Но вот это оставлю тут для размышлений, раз уж разговор зашел об уместности использования https://css-tricks.com/dangers-stopping-event-prop... Просто на всякий случай, чтобы читающие не ринулись слепо что-то писать.

Что делать, если div перекрывает событие другого div'a?

ZerdoX-x, захочет выделить потенциальный текст под которым находится нечто на что можно кликнуть? Ну предположим.
Но, если что, pointer-events не мешает выделять текст.

Как сделать, чтобы клиент мог добавлять через стандартный редактор вордпресса картинку, и она обтекалась текстом?

alexiusgrey,

или про добавление класса floatright, мне последнйи не помог

Если нет никаких чудес со стилями, то возможно, например, потому что картинка в код после текста, а не до.

Почему не работает margin?

Aetae, ага, мне тоже кажется, что такой диалог уже был :)
У меня тоже есть такие любимые грабли

Почему не работает margin?

Ссылка не просто block - а inline-block

Ссылка не inline-block, ссылка просто inline

Почему не работает margin?

danteasy, а, просто вышло смешно ))
Старайтесь анимировать только те свойства, которые изменяются.
transition: border .5s;

Почему не работает margin?

p.s. а ещё расскажите, зачем вам анимировать ВСЕ свойства, если вы меняете нижний бордер с белого на белый?

Как сделать такую линию в header-e?

Чем border не угодил?

Как должна выглядеть файловая структура сайта по БЭМ?

Вот тут есть 3 четких варианта https://ru.bem.info/methodology/filestructure/

Что делать, если div перекрывает событие другого div'a?

Не js, но зато очень просто https://developer.mozilla.org/ru/docs/Web/CSS/poin...

p.s. в качестве интерактивных элементов лучше выбирать не div.

Как сделать такую резиновую сетку?

я дал первому элементу grid-column-start: 1; grid-column-end: 3;
но соседние 2 ячейки стали занимать всю высоту, и вытеснили остальные 2 изображения.

Если один блок занимает 2 клетки по высоте и 2 по ширине, то разумно так и писать.
А не только про ширину.
И всё получится.

Как растянуть flex-box на всю ширину?

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

Итак: "Как растянуть flex-box на всю ширину?" - сейчас он на всю ширину. На всю ширину своего родителя.
Значит, нужно не забыть посмотреть что с родителем.
Если сложно просто через девтулз, то очень помогает задавать рамочки или фоны блокам.

И как убрать эти области которые создаются?

Ну они же не сами создаются.
Они заданы у вас в верстке.
Ведь кто-то же написал правый отступ для p

.ct-header-text .entry-content p {
    margin-right: 40px;
    margin-bottom: 0;
}

Кстати, что делает пустой p с классом .footer-line в хедере?

И т.д.

Почему при наведении ссылка всплывает не там где указано?

qwexort, ерунда какая-то. Там обращение по дочернему селектору, а не по соседнему.

Почему при наведении ссылка всплывает не там где указано?

qwexort, я не меняла местами, а поставила доп обертку.
Иначе у вас мышка уходит с картинки и ховер теряется.

Как правильно спозиционировать один элемент или блок относительно другого в БЭМ?

Norum, только блокам

Как правильно спозиционировать один элемент или блок относительно другого в БЭМ?

Например: есть блок, в котором находится картинка и блок с текстом и этот блок с текстом располагается посередине картинки.

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

Потому что (по классике) блок не должен знать о своей внешней геометрии.

Почему при наведении ссылка всплывает не там где указано?

qwexort, https://jsfiddle.net/zh814pjv/

Почему при наведении ссылка всплывает не там где указано?

Вы можете внятно объяснить, зачем для ховера JQ?
Почему бы не поменять местами картинку и ссылку и не делать ховер в css?

Как правильно сделать эту таблицу в CSS?

Элементарно гридами и nth-child

Почему не работает иконка font awesome?

подскажите в чем моет быть проблема

Например, в том, в подключенном шрифте нет такой иконки.
Всегда можно открыть файл стилей и проверить.

Или неверно написан класс.