Ankhena

но у svg в коде есть определенная ширина и из-за этого картинка становиться или в левый или в правый край

Ну не из-за этого, а из-за того, что по умолчанию, svg не меняет пропорции.
Но это меняется с помощью атрибута preserveAspectRatio

1. Плейсхолдер не должен быть пустым. Хотя бы неразрывный пробел  
2. Посмотрите на хотя бы в вопросе. Видите, кусок жирный? Исправьте.
3. Изучите селекторы
.username:focus ~ .for-username
Это значит: найди for-username, которые идут следом, на том же уровне, что и username и когда он в фокусе.
Таких элементов не существует, потому что в коде всюду сначала label, а потом input.
Т.е. либо использовать :focus-within либо менять разметку.

Просто тень
box-shadow: -10px 10px 0 0 violet;

Плейсхолдер забыли
Чтобы срабатывал :placeholder-shown (и в сочетании с :not) он должен быть.

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

Добавляйте что-нибудь типа font-variation-settings: 'wght' 1000, 'CONT' 1000

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

По умолчанию 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.