Dubrovin

1. Верстаете так, чтобы блок был по центру
2. Вешаете на блок анимацию через keyframe, которая в 0% перемещает через transformX блок к правому краю страницы, а в 100% возвращает его назад.

Мы разрабатываем под WordPress по методологии БЭМ и придерживаемся следующих правил:
1) Отдельный блок (компонент) включает в себя файл инициализации php, файл шаблона php, один или несколько файлов css - под модификаторы стилей создаются отдельные файлы, файл javascript.
2) Под каждый блок создаётся своя папка
3) В зависимости от блока у него может отсутствовать JS, CSS, файл инициализации или темплейта, например, у блока "Анимация" нет темплейта, но есть CSS и JS.
4) Для нативных тегов HTML без классов есть отдельный блок Component, в котором прописываются стили, например, для типографики

Конкретно по вашим вопросам:
1,2) header, footer и wrapper - должны быть или отдельными блоками, тогда вам нужно в header прописать класс header, а в footer прописать класс footer, либо должны быть элементами более общего блока, например, layout, тогда будет файл layout.css в котором вы пропишите стили для header, footer, wrapper.
Секция также является отдельным блоком.
3) Блокам block2 и block3 миксуются классы section1__block2 и section1__block3 и css прописывается только блоку section1
4) Можно, и даже нужно, если это исключает дублирование кода, но таким образом вы создаёте зависимость одних компонентов от других (это может быть как хорошо, так и плохо, в зависимости от архитектуры вашего кода). Вообще БЭМ - это не про жёсткие правила
5) Медиа-запросы должны быть частью блока "Сетка с колонками". Все остальные блоки помещаются в эту сетку при необходимости.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Возможно, проблема в кодировке исходников, проверьте, чтобы все файлы были в UTF-8 без BOM

Прошу прощения, нашёл решение, делается через :first-of-type и :last-of-type соответственно.