для media (max-width: 769px) .page-body .aside-contents-container {
ты задал visibility: hidden; но это не убирает его из документа. тобишь он все еще присутствует там. хоть и не виден. задай ему display: none или width и height сделай 0
смотря как переопределяешь. если ты решил изменить какой-то блок и просто в нужной странице переопределил пару свойств этого блока - то да. это даже хорошо. потому что ты не создал лишних классов и блоков.
но если ты пошел дальше и начинаешь десятки свойств блока возвращать в дефолтные методом inherit, а потом снова переопределять где то. а в адаптиве еще раз все менять - то это уже плохой тон.
дай угадаю. скролла справа нет? и страница короткая и почти без записей?
upd: #sns-vertical-menu-toggle .sns-vertical-menu-content стоит стиль visibility: hidden; который просто скрывает блок. но не убирает его. тобишь его высота по прежнему остается. сделай ему display: none к примеру при скрытии. или height задай 0 при скрытии.
это так не работает. ты в любом случае должен знать все. и float и flex и inline-block и даже display: table. от того что ты сетку сделаешь по flex - это не значт что в других местах в проекте тебе не придется применить float. или еще чего.
а sass то тут причем? тебе для каждого раздела класс нужно дать. к примеру для body. ну или для общего wrpapper, если такой имеется. и в зависимости от этих классов уже задавать для меню свой уникальный цвет.
p.s. и это ты можешь делать в том же скрипте где ты .active вешаешь на раздел. просто там же навесить на body класс этого раздела к примеру
способ 1: качаешь бутсрап - подключаешь. чинишь косяки верстки после border-box. заменяешь нужные вещи на col и пару запросов в media.
способ 2: все адаптируешь через media.