Вы знаете, два блочных элемента идут друг под другом сами по себе.
Но в коде вы для 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. Лучше не засорять демонстрируемый код свойствами с префиксами.
Никто не знает будет ли смысл конкретно для вашего проекта.
Зависит от того, насколько разные стили/скрипты для разных страниц и сколько страниц (или типов страниц) просматривают посетители.
Bob Clapton,
Например, есть у вас секции, одна за другой. Они блоки. Но потребовался между ними отступ (забыли что есть gap) и хотим задать margin.
Задаем секции класс элемента и пишем туда эти margin.
Или второй вариант: когда стили зависят от родителя. Можно модификаторы, а можно миксы.
Список чего-нибудь. Пусть это менюшка на сайте состоящая из корзины, лупы открывающей поиск, избранное и какая-то кнопка Написать. У каждой из этих сущностей будет по два класса, общие, например, те же отступы или высота или цвет шрифта. И уникальные от блоков. Потому что каждая из сущностей еще и блок, ведь может быть переиспользована где-то ещё.
