Сергей ZSA

Использовать flex. Стили такие:

.gallery {
  display: flex;
  justify-content: space-between;
}
.gallery img {width: 33%;}

Зачем каждому изображению давать свой класс и писать одно и то же я честно чет не понял... есть ведь селектор по тегу и всё с ним хорошо. Ширину при желании можно сделать меньше. Но не забывайте, что flex может сплющить ваши картинки и придется писать у них и нужную высоту (у каждой, либо вырезать все одной высоты и всем задать одну и ту же).

А где-то ещё повторяться будут такие же табы кроме как именно в этом блоке? Скорей всего нет. К примеру у вас есть блок с социальными сетями в подвале, там 5 кнопок и они определенным образом расположены. Все эти кнопки будут элементами оборачивающего их блока. Использовать ещё раз этот блок где-то в другом месте с этими кнопками вы можете снова, но использовать отдельно одну единственную кнопку какой-то социальной сети... в этом нет практического смысла, если конечно дизайн этого не требует (ну как бы не логично это).

Из-за чего такая логика? Всё просто. У вас есть абзац текста с какой-то стилистикой. И таких абзацей под этим абзацем штук 10 и ещё в других местах такие же тексты есть (к примеру это уже не абзацы а небольшие подзаголовки или может ссылки или ещё что-то). Вы же не будете все эти теги делать блоками. И элементами можно их даже не делать, а просто обращаться к ним по типу .content-text p {....} .sidebar a {....} ну допустим примерно так. Иначе если бы мы делали блоки везде, где какие-то стили повторяются - нам не нужны бы были элементы и теги без классов тоже бы отпали, 90% кода были бы блоки, а это будет крайне неудобно. Суть в том, чтоб не усложнить работу, а упростить. Именуйте мудро и будет всё хорошо у вас.

P.S. Надеюсь объяснил доступно. По крайней мере так я понимаю. Очень советую посмотреть работы, где использован БЭМ, поисследовать такие сайты, попытаться сделать пару проектов. Станет легче.

Есть как минимум 5 способов выравнивания по центру:
1. margin: 0 auto; для элемента, у которого есть display: block; ну или блочность по-умолчанию
2. У элемента, в который вложен другой элемент поставить text-align: center; тогда элемент внутри будет по центру (если он не блочный, а к примеру строчно-блочный или строчный)
3. Для любого блока абсолютное позиционирование, left: 50%; transform: translate(-50%, 0); если хотите чтоб не от body считалось - сделайте relative для блока родителя.
4. justify-content: center; для flex
5. При помощи padding для блока-родителя (это уже изврат, но тоже можно и надо, чтоб внутренний блок тянулся на всю доступную ширину)
6. Способ похож на абсолютное, но не transform а margin-left: -(ширина в px элемента, который позиционируют), давно этот способ не использую, проще transform.

По-моему есть ещё, но чет уже забыл. Выбирайте тот способ, который вам нужен. Не знаете как пользоваться тем или иным - читайте тот же htmlbook.

Можно сделать с помощью svg, только нужно будет перерисовать немного - рисуем синий полностью, зелёный полностью и красного часть (как на скрине 5 блок), это всё в куче экспортируем в svg и ставим фоном, а красный потом просто цветом задать. Просто вопрос в том, что конкретно будет в этом блоке. Если допустим просто контент на весь этот фон (неразрывный блок) - можно всё вообще экспортировать в svg, если же стыки блоков где-то есть - то уже по ситуации смотреть естественно и соответственно ситуации вырезать.

h2 (или любого другого тега) с центрированием, внутри span у которого inline-block, а также у него же before и after с такими же inline-block но размерами (ширина и высота) ну и конечно у span и у before и after vertical-align:middle; всё.