Anton Bobylev

Извращенский вариант )

Смысл в том, что нужно поменять лейбл и инпут местами в верстке, а визуально оставить на прежних местах с помошью флексов. Тогда до следующего елемента легко достучаться из css с помошью "+"

Exporting multiple configurations

Воспользуйтесь инструментами разработчика в вашем браузере и посмотрите на сгенерированный html и css для данного элемента (и его родителя). И сразу станет ясно куда копать! Всяко лучше, чем гадать по картинке без какого либо кода. Потому что пока ответом на ваш вопрос может быть только: "потому что вы где-то накосячили", но вас это вряд ли устроит.

Используйте медиа-запросы.

@media screen and (max-height: 200px) { /* задайте нужную минимальную высоту окна */
  #buttom { /* по-английски правильно "bottom" */
    display: none; /* изменяйте поведение элемента как сочтете нужным */
  }
}

зы: "отправьте", "заново", а лучше "снова", а еще лучше "еще раз".

Отключить кэширование при включенных dev-tools.

Вот вам такой вариант: codepen.io/anon/pen/xgWKab?editors=1100

Но это шаманство и проще действительно скрывать нужные блоки в зависимости от размера экрана.

При такой верстке это не возможно без использования JS. Нужно либо дождаться поддержки :has, либо каким-то образом вынести ссылки на один уровень с чекбоксом и использовать ~

Потому что на него давит блок .copyrights.

350+200 = 550

Верстку поправьте, у вас в списке то </a></li>, то </li></a>

jsbin.com/kojawuw/edit?html,css,output

Нужно задавать значение по умолчанию, если планируете использовать миксин как с параметрами, так и без.

Вставьте в текст знаки мягкого переноса. https://jsfiddle.net/tpjqtyjh/6/

Или посмотрите в сторону переносов средствами css https://css-tricks.com/almanac/properties/h/hyphenate/

Используйте namespace. Это достаточно распространенная практика для изоляции стилей.