Ankhena

Удобнее всего это решается гридами.
Примерно так: https://jsfiddle.net/mowb6dL3/

1. Флоатами сетку не делают уже очень давно.
2. Задавайте высоту только там где без неё не обойтись

1.

position:absolute
top: 0;
left: 50%;
transform: translateX(-50%)

2. родителю

display: grid;
grid-template-columns: 1fr auto 1fr;

3. Плохой вариант
Флексами
Родителю задать after.
Этому after и Home задать одинаковую ширину (с запасом).
Центральному левый и правый margin в auto

Если вы не учите js, а хотите изменить инпут в фокусе, то используйте css

input:focus {
color: rgba(0,0,0,1);
}

А если учите js, то изучите querySelectorAll и forEach, а также браузерные события и пишите их в скрипте, а не в разметке, не делайте кашу из кода.
https://developer.mozilla.org/ru/docs/Web/API/Docu...
https://learn.javascript.ru/introduction-browser-events
https://learn.javascript.ru/array-methods

border-collapse: collapse для таблицы

1. Родителю text-align: right
2. Родителю flex
- margin-left: auto кнопке
- justify-content: flex-end родителю
3. Абсолют кнопке

и еще пачка других возможностей

Вся высота вьюпорта это 100vh
Родителю задать высоту 100vh и display: flex.

https://jsfiddle.net/0t8gbn5u/

p.s. float для верстки перестали использовать уже очень давно.

Начните с ответа на вопрос, зачем родителю flex-direction: column;?
Но если он всё таки нужен, то добавьте align-items: flex-start
Инлайн блок у дочернего можете не писать - это бесполезно, дочерние элементы флекса инлайн-блоками не станут никогда.

До недавнего времени всё было нормально:

А потом вы задали overflow: auto; для body.

Вообще не нужно ограничивать ширину body и задавать ему overflow. Сделайте лучше контейнер, сложите всё в него и уже ему задавайте центрирование, ширину и всё, что хотите.

grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));

или

grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));

Вместо 30 поставьте сколько нужно.

При масштабе 175% родитель становится 35px, дочерний 28px.
Как бы вы хотели, чтобы он нарисовался ровно по центру родителя?

Можно попробовать заменить центрирование флексом на абсолют с трансформом.

Но лучше избавиться от span'a. Зачем 2 тега, если всё это решается одним тегом. И просто border
https://jsfiddle.net/uqfpbx1w/

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

@font-face {
    font-family: 'drevodel_regular';
         url('fonts/drevodel_regular.woff2') format('woff2'),
         url('fonts/drevodel_regular.woff') format('woff'),
    font-weight: normal;
    font-style: normal;
    unicode-range: U+30-39;
}

Не работает с шрифтами подключенными через Google fonts, необходимо локальное подключение.

1. Смотрите, работает https://jsfiddle.net/L59cqhft/
Значит, с вашим кодом где-то по дороге происходят какие-то преобразования.

2.

Также почему :before сполз вниз, хотя стоит top: 50%. Разве он не должен находится на середине рамки?

Абсолют позиционируется относительно ближайшего родителя с position: relative, а при его отсутствии относительно окна браузера.
Зададите для blockquote relative, будет позиционироваться относительно него.

Так вы хотите: https://jsfiddle.net/y8sc56go/ ?

Чтобы уменьшить расстояние между кнопкой и текстом изменяйте margin-bottom для .text1, сейчас у вас там написано 240px.

https://jsfiddle.net/hL6mft9e/
https://jsfiddle.net/6x1ynheu/

В тег p нельзя засовывать другие p, div и т.д.
Браузер нарисует их не так, как вы ожидаете.
Он закроет p, там где начнется другой блок.
Внутрь p можно вкладывать только фразовый контент.
Спецификация

Так что в качестве контейнера используйте лучше div

За вставку контента отвечает innerHTML https://learn.javascript.ru/basic-dom-node-propert...

1. На JS
2. Применять стиль не к обертке, а к псевдо от лейбла. Этот псевдо сделать абсолютом, а релатив задать обертке.
Тогда визуально будет казаться, что покрасилась обертка.

Либо задать ссылкам display:block
Либо убрать оборачивающие их div (ибо не нужны).
Если хочется во что-то их оборачивать, то уж в список тогда.

Высоту задавать через grid-auto-rows: 1fr; у строк грида.

И разобраться с высотой и шириной для .wrapper, а то у вас там заведомая лажа написана.