Как выровнять h1 сверху?
там все через одно место сделано. если не вдаваться в подробности - вставь этоheader p {
    position: absolute;
    left: -50%;
    transform: translateX(-50%);
}
https://codepen.io/anon/pen/GNgEmJ
body > * {
	background: #535353;
	height: 0.5em;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.5em;
}Это что за мазохизм? Уберите:
height: 0.5em;
width: 0.5em;
position: absolute;
left: 50%;
top: 50%;
Они делают все элементы внутри body размером 0.5em, более того смещают все на 50% от левой границы экрана. Зачем? Разебиресь с селекторами. Если надо было дать какому-то элементу такие стили, то найдите его, пропишите явно класс и в CSS пропишите:.my-new-class {
	background: #535353;
	height: 0.5em;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.5em;
}