Ankhena

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

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

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.

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

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

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

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

Зачем вам вообще overflow hidden для этой кнопки?
Все ведь очень просто: https://jsfiddle.net/o5cskfxL/

Добавляете класс при открытии и ему добавляете анимацию. Но только тех свойств, которые вообще анимируются. Свойство display не анимируется.
https://jsfiddle.net/46rg1wyb/

Координаты окну задайте.
top: 0 или сколько вам нужно

box-sizing: border-box