Максим Иванов

Самое простое решение- прописать margin-left: auto; margin-right: auto; в класс card:

.card {
	width: 100px;
	height: 100px;
	padding: 35px 61px 213px 61px;

	background-color: #3C4070;
	box-shadow: 0px 4px 54px rgba(0, 0, 0, 0.2);
	border-radius: 7px;

	position: relative;
	margin-left: auto;
	margin-right: auto;
}

Тогда все карточки будут центрироваться по горизонтали.

.menu > li:hover {
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
}

В целом, всё на ваше усмотрение. Раньше для сеток вообще исопльзовали таблицы или float. Которые для этого не предназначены.
Однако, считается хорошим выбором чтобы использовать гриды для сеток\раскладок элементов, а флексы уже внутри блоков для выравнивания, порядка и тд. Когда нет чёткой сетки или она не нужна и тд.

свежак:
https://www.youtube.com/watch?v=ST1EvRemB_U

Гриды были созданы для сеток\раскладок.
А флексы для управления потоком элементов.

Опирайтесь на тз, браузерную поддержку и здравый смысл.

ul {
  flex-wrap: wrap;
}
ul li {
  flex-basis: calc(50% - 65px);
}

Для изображений добавьте object-fit: cover, height: 100%, vertical-align: middle;

Пример с вашей версткой https://codepen.io/NotLogo/pen/Bazqrgd

Можно сделать так:
1) Создать репозиторий на github;
2) git clone "адрес репозитория" - клонируем на пк;
3) Создаем файлы и папки;
4) git add .
5) git commit -m "newCommit"
6) git push
Profit!

Используя flex-wrap, минимальные и максимальные размеры, а лучше сразу перейти на гриды с их auto-fill и\или minmax размерах.

Если точные пиксели не важны, то юзай vertical-align: super; и всё.

Поскольку эти цифры не подходят для тега sup, то это просто span сдвинутый наверх любым из способов
- position relative
- margin
- transform

Это делает просто с помощью JavaScript. Работа с атрибутами и стилями. Показать/скрыть. Ну и так далее

Задействованы обычные селекторы по id/классу
Подробнее здесь: https://learn.javascript.ru/searching-elements-dom

Около названия файла есть стрелка вниз, там есть "Duplicate to your Drafts"