NarutoHokage, к верстке нет, не относится.
Должен ли это делать верстальщик - как договоритесь. Поскольку скриптик, например, на php отправляющий почту не сложнее валидации формы на js (скорее проще).
Вы знаете, два блочных элемента идут друг под другом сами по себе.
Но в коде вы для nav задали флекс и элементы встали рядом.
Т.е. нужно отменить флексовость родителя или переделать на флекс колонками (фик знает, почему у вас не работает) или на гриды.
Компилировать ваш код в уме не очень удобно, поэтому сделайте песочницу с минимальным кодом, нужным для демонстрации проблемы на codepen.io
1. Начните с того, что div нельзя вкладывать в label.
2. Сам инпут, я так понимаю, у вас скрыт. (Используйте паттерн visually-hidden (гуглится)) Меняем разметку: сначала инпут, после него label, внутри которого span и картинка. Инпут и лейбл связываем по for-id.
3. hover перевешиваем на label
4. Состояние выбранного или не выбранного делаем через соседние селекторы input:checked + label {стили}
p.s.
1. Если в вашем коде !important, значит вы скорее всего творите что-то не то.
2. Лучше не засорять демонстрируемый код свойствами с префиксами.
