Ankhena

Пройдите игру по гридам https://cssgridgarden.com/#ru
Очень помогает, в том числе и с вашим вопросом.
Дел на полчаса, а результат в голове очень заметный.

И пример аналогичной раскладки
https://codepen.io/AnnaSummer/pen/vYryQvo

<code lang="diff">

</code>

Вообще-то они одинаковые :)
НО у инлайновых элементов вертикальные паддинги ведут себя не так, как у блочных.
Если вы зададите побольше отступы у body или как-то еще отодвинете ссылку от верхнего края браузера, то увидите свои два одинаковых паддинга.

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

https://codepen.io/AnnaSummer/pen/qBMpPjN

Как-то так https://codepen.io/AnnaSummer/pen/wvEJbbq

Убираете инлайновый fill и красите на здоровье

.socials__link:hover {
  fill: red;
}

А ещё лучше перейти с символьных спрайтов на стеки и не мусорить в разметке, а использовать mask
Сборка стеков, например: https://www.npmjs.com/package/gulp-stacksvg
Также они вставятся и в use и в css в качестве content, bg или mask.
Про маски https://codepen.io/noahblon/post/coloring-svgs-in-...

Псевдоэлементы и радиальные градиенты
https://codepen.io/AnnaSummer/pen/KKQgaaN

Проявить смекалку и делать тень не тенью, а градиентом

-n+4

Замените в разметке на :view-box.camel="viewbox"
Кстати, я нагуглила ответ за 1,5 минуты.

По умолчанию label инлайновый.
Вы написали ему width 190.
Это не сработало, потому что инлайны не понимают width.
Вы задали ему float => display поменялся на block => применилась ширина => в одну строку не влезло, инпут перенесся на другую строку.

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

Либо вовсе убрать класс container и оставить только menu

Повторяющимся радиальным градиентом
https://jsfiddle.net/Ankhena/h21s4o0m/

https://codepen.io/AnnaSummer/pen/ZERRrpq

grid-auto-rows: minmax(170px, min-content);

Прям так и задать
gap: calc(5% + 10px);
gap: calc(5vw - 10px);

Единицы измерения зависящие от размеров вьюпорта: vw, vh, vmin, vmax

Также вам может помочь функция clamp (или min или max).

Например, если нужно задать 5vw, но не меньше, чем 10px и не больше, чем 50px
gap: clamp(10px, 5vw, 50px);

Тогда не нужен calc.

Вы же на кнопку повесили transition, а на svg - нет. С чего бы им изменяться одновременно и одинаково?

1. Нет смысла вешать all, если изменяется одно свойство, его и указывайте.
2. div не может быть дочерним элементом button, лучше заменить на span.

.block {
  $this: &;
  &--small {
    #{$this}__elem {
      height: 100px;
    }
  }
  &__elem {
    width: 200px;
    height: 200px;
    background: red;
  }
}

Но вообще, элементы через & делают поиск по проекту в 2 итерации вместо одной.
Не люблю, когда так.