Elena Fire

grid вам в помощь

Через псевдоэлемент при ховере. Этакий изврат.
Через padding для a. Задать левый padding больше остальных, тогда при ховере текст будет попадать на середину. Тоже так себе вариант.
Через text-align: center; у a при ховере. Правда, будет скакать текст при наведении. Может вызвать приступ тошноты.

Главный вопрос: а зачем по центру? Тексты неодинаковые по длине. Значит и вид при применении этого "по центру" будет меняться при проходе по спискам. Это будет УЖАСНО. Ни один юзер это не примет с восторгом - см. выше про тошноту.

Есть еще волшебное свойство object-fit: contain;

Можно и нужно.

1) html4 - html5 - все базовые теги (как минимум)
2) css3 - block, flex, grid, animation, transition, transform, все для текста
3) JavaScript - подключение, слушатели, взаимодействие с DOM, базовые функции
4) Знать стандарты scss/sass.
5) BEM - правила наименования классов в разметке
6) все про style, class, id, data-, приоритеты в стилях
7) умение работать с git (GitHub, Bitbucket, Jira) и репозиториями - для работы в командных проектах
8) навыки коммуникации и ведения переговоров
9) базовые навыки в чтении и составлении технических заданий на верстку (ТЗ)
10) сверстать не менее 5 шаблонов разных типов и найти того, кто проверить и прокомментирует верстку, поправит и подскажет, - ментор или учитель
11) любовь к этой работе

Думаю, мои коллеги добавят еще чего-нибудь. А вот эти 11 пунктов - база для начала работы верстальщиком.

На больших проектах логично создавать отдельные файлы стилей. В scss или sass или less, которые потом собираются в один css. Насчет комментариев внутри кода - утяжеляют. Иногда это бывает критично.
Стили уникальных страниц прописываю с одинаковым началом - например, about__ или shop__.
Тогда при сборке уникальные стили страницы идут один за другим и не перекликаются с другими страницами. И править при необходимости такой файл легче.
Alex правильно говорит, по уму все стили еще на стадии подготовки к верстке должны быть разделены на группы.

Никак.

Bootstrap - это не Священный Грааль. Это всего лишь [препроцессор] фреймворк. Скажу по секрету, в результате браузер читает чистый css. Соглашаюсь с коллегами - пользоваться или нет, вопрос ситуации.

Чтобы не сидеть часами у монитора и не писать бесконечные медиа-запросы. Таким незамысловатым образом верстальщики сокращают количество кода, делают его удобочитаемым, а поведение элементов на странице - предсказуемым. И это желательно делать не некоторым верстальщикам, а всем поголовно.

Сразу оговорим несколько исключений при ответе: дизайн не рассматриваем, шрифты не рассматриваем, стили не рассматриваем (думаю, там много чего можно поправить), адаптивность не рассматриваем.
Про верстку:
1. h1 может быть только ОДИН на всю страницу. Здесь их - гораздо больше.
2. куча ненужных контейнеров - в большом контейнере поменьше лежит, в нем еще меньше, потом еще один и еще один в нем на всякий случай, и вот (наконец-то) содержимое. Меньше вложенности - больше порядка.

Чтобы были правильные border, нужно задать размеры тексту. Например, так:

.text {
line-height: 3em; //высота строки, чтобы не задавать лишние padding-top/bottom
font-size: 2em;
padding-left: 30px;
padding-right: 30px;
border-bottom: 1px solid #color;
border-right: 1px solid #color;
}

Волшебная палочка - быстрое выделение (оч удобный инструмент). Выделяете надпись, вырезаете на новый слой, заменяете это место фоном (штампом аккуратненько). Пишете свою надпись на новом слое. И вуаля! - три часа (или быстрее) работы - и вы уже пишите собственную надпись!

Хотя похоже у вас вопрос, как этим же шрифтом с таким же разворотом написать свою надпись взамен этого слоя? В слоях не видно, чтобы это был текстовый слой, так что просто подбираете похожий шрифт (если знали, какой использовался, то вообще элементарно) и через трансформацию разворачиваете, 3d объем придаете и вертите, пока не получится идентично. Или очень похоже.

Тег a просто выстраивается в строчку. Не то, чтобы склеились, просто ничем не настроен внешний вид. Если есть css файл, то прописываем в нем:

a {
padding-right: 10px; //или сколько надо для красоты
}

Если файла нет, то пишем прямо в коде

<style type="text/css">
a {
padding-right: 10px;
}
</style>

Сделать одно описание стилей для form. У каждой формы есть свой name, для них прописать под стилями для form все отличия. Например:

form {
//стили для всех форм
}
form[name="Название формы"] {
//стили для этой конкретной формы
}

.block1::after {
content: "";
display: block;
clear: both;
}

Должно помочь.

1. Убрать пустые места. Для этого содержимое вложенного меню не должно строиться в блоках или по grid-сетке. И у вложенных категорий не должно быть установленных высот. Используйте flex - позволит автоматически выстраивать содержимое.
2. Закрепить меню вверху страницы. Для меню второго уровня выставляется position: fixed
3. Аккордеон в меню. JS вам в помощь, почитайте о механике аккордеонов. Можно и CSS обойтись, но только с radio кнопками и их позиционированием.
4. Подсветка активного раздела. :active - у активного раздела основного меню и прописываете поведение блока.