Как решить проблему с margin + height: 100vh?
Я юзаю calc, но динозавры его могут не поддерживать, зато без js.
В вашем случае:height: calc(100vh - 6rem);
Так как margin: 3rem; То плюсуем верх и низ и убираем 6rem
Вся прелесть calc что он умеет работать с разными величинами
В принципе неплохая поддержка: https://caniuse.com/#search=calc
https://codepen.io/g0lovachlena/pen/qBWwrXd
Или же если не хотите использовать calc, то можно использовать padding, но background задать для дополнительного дочернего элемента.