Ankhena

Убрать float left.
И вообще не использовать его не по назначению.
А назначение - обтекание одного элемента другими.
Для построение сеток используйте флексы или гриды.

input:focus {
  outline: none;
  /* сюда добавить свои стили, чтобы человек видел, что инпут в фокусе */
}

Для другого вопроса было, суть одна. Просто grid.
https://jsfiddle.net/Ankhena/ndu0k365/

https://developer.mozilla.org/ru/docs/Web/CSS/alig...

align-content: flex-start;

1) На чем верстают адаптивные современные сайты и приложения, на флексах, гридах или еще чем-то?

Да
Пояснять нужно?

2) Может кто подскажет лайфхаки, как быстро освежить память в HTML/CSS. Знания есть, но уже подзабыл, нужен какой-то быстрый курс, видео или книга по основам, чтобы освежить память.

Если время потратить - то любой курс, видео или книга.
Если делать - то начать делать.

Потому что у кнопок разный font-size, а выравнивание по базовой линии шрифта.

Читать про line-height
https://web-standards.ru/articles/vertical-align/
https://css-live.ru/css/metriki-shrifta-line-heigh...

Читать про блочную модель https://developer.mozilla.org/ru/docs/Learn/CSS/Bu...
Чтобы не пытаться задавать размеры инлайнам.

Вам сюда
https://web-standards.ru/articles/vertical-align/
https://css-live.ru/css/metriki-shrifta-line-heigh...

И ещё за флексами.

table-layout: fixed

Не работает aspect-ratio через padding в контейнере flex?

Работает.

Но ведь не зря его задают не элементу, а его псевдоэлементу. Потому что паддинг в процентах считается от ширины родителя. (В гридах есть нюансы)

Попробуйте атрибут translate
https://developer.mozilla.org/en-US/docs/Web/HTML/...

Пытался разделить на столбцы но они не могут быть все одинаковой ширины.

Кто они не могут?

И, во-первых, могут.
А, во-вторых, никто не заставляет делать их одинаковыми.

Если сетка именно такая как на скрине, то считаем количество столбцов и их ширину. По дороге находим баг в макете (или на вашем скрине). В итоге будем считать, что отступы всюду по 30.
Получаем:
270 270 170 370

Для адаптива переводим всё в единицы fr, по дороге упрощая числа (это сами).

Тег option не зря парный, а не одиночный, каким вы попытались его сделать.
И внутри тега как раз таки пишется то, что видит пользователь, а в value то, что уходит на сервер.

Если проверять то, что пишете валидатором, то и проблем будет меньше.

изменил all на конкретную стилизацию например: " transition: scale 0.05s linear;",

Нет такого свойства, вот и не анимируется.
Есть свойство transform и вот оно прекрасно анимируется.

Например, так

Потому что getElementsByTagName это коллекция, а не элемент.
Используйте querySelector.

Переменной больше подойдет название body, чем telo.

В самом скрипте выгоднее манипулировать классами, чем напрямую стилями. Проще помнить вам и проще разбираться другим.

span это не интерактивный элемент. Штуки с крестиками, закрывающие модалки называются кнопками <button>

Проще всего гридами
grid-column и указываете колонку
и dense или grid-auto-flow column

По аналогии https://jsfiddle.net/Ankhena/k2g1x0sh/

Взять её в SVG и поставить, например, фоном. Или фоном псевдо.
Если SVG много, их можно сложить в спрайт.
Можно писать инлайном прямо в код CSS с помощью url-encoder
Можно поставить в разметку, если так удобнее, только не забыв задать aria-hidden.