SCG13

у меня на ноуте с высотой экрана в 768px 100vh это 657px. Вы забываете, что на экране есть панель задач, а у браузера вкладки, адресная строка, у некоторых еще закладки.
vh, vw это для моб норм ипользовать.
Пропишите пару точек c min-height, даже с теми же vh, но без heigth, хоть ломаться не будет.
И padding у .head и .head2 уберите

@media screen and (max-height: 768px) {
	header {
		height: 100vh;
	}
	.head {
		 padding-top: 30px; 
	}
	.head2 {
		padding-top: 60px;
	}
}

будет так https://habrastorage.org/webt/02/vv/7x/02vv7xqbumh...