Ankhena

Вьюпорты различный устройств: viewportsizes.com

Нормально должно быть на любом размере окна. На десктопах совсем не все и совсем не всегда держат окно браузера развернутым на полный экран. А значит ширина окна может быть абсолютно любой.

Обычно, открываю это https://webref.ru/css
Проглядеть список глазами и вспомнить нужное - несколько секунд.

Дополнительная польза - заодно вижу свойства о которых не знала или забыла. Это ускоряет или усовершенствует верстку в дальнейшем.

Свойства за которыми лазала несколько раз записываю ручками на бумажку.
Еще о них можно кому-нибудь рассказать :)

Если прям точно нужны несколько карт и способ Сергей Вам не подходит,

то табы на CSS без JS:
inferusvv.ru/blog/css/14-taby-s-pomoschyu-css3.html

Лишние стили:
CSS Usage для Firebug. Правда, нужно последовательно открыть все типовые страницы сайта, чтобы остались точно неиспользуемые стили. Почитайте инструкцию.

Лишние правила: в WebStorm есть проверка CSS - выдает все ошибки. В частности есть раздел про избыточное переопределение правил.
Правой кнопкой по файлу в списке проекта, Inspect Code.

1. Перерисовать картинку с учетом отступов.
2. Двигать текст, чтобы добиться желаемого визуального эффекта.
3. Использовать background для li вместо list-style-image
4. Использовать :before и ему background

1. Банальная геометрия.

2. Читайте
Использование мета тега viewport в неадаптивных ша...
Размеры viewport различных устройств http://viewpo...

Основы адаптивного веб-дизайна с помощью Twitter B...
62 полезных инструмента для адаптивного дизайна

и дальше продолжать гуглить в ту сторону, уже по собственному сценарию.

Логотип должен быть ссылкой на главную страницу сайта.
Поэтому:

Вариант 1:
Логотип, т.е. картинка с текстом это единое целое и текст в ней не должен быть текстом.
Значит в HTML это просто ссылка без анкора, у которой фон это картинка.

Вариант 2:
Если текст должен быть текстом.
Тоже самое, только в анкоре у ссылки нужны слова. Можно со спанами, если несколько слов или строк и они должны иметь разный вид.

Исхожу из идеи, что картинки в оформлении должны быть background'ами. С помощью img вставляю только картинки которые ими являются с семантической точки зрения.
И второе: городить поменьше тегов. Т.е. img оборачивать еще и в div (это если меня не слушать и вставлять логотип с помощью img) - это вообще лишнее действие для которого нет оснований.

Для картинок и подписей к ним есть специальные теги: figure и figcaption.
Для выравнивания группа свойств флексбокс.

https://jsfiddle.net/a6x7e5so/

Можно заменить на div'ы и/или span'ы.

Если это дочерний элемент, то
a:hover .block {}

Аналогично для соседних и т.д.

Если элементы не состоят в CSS-родстве, то JS

В кавычки

Потому что полоса прокрутки тоже имеет ширину и содержимое не умещается в 420 точек.
Используйте для ширины полей в форме %% или calc или flex у родителя.

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