Как выровнять h1 сверху?

Question

[Aladdin]

Код не мой, я новичок в этом деле. Когда вставляю в body, то на тексте появляется квадрат, а когда в header, то его не получается выровнять, помогите пожалуйста.

Вот ссылка https://codepen.io/MrTabrest/pen/xRbdvz

Answer 1

[iBird Rose]

там все через одно место сделано. если не вдаваться в подробности - вставь это

header p {
    position: absolute;
    left: -50%;
    transform: translateX(-50%);
}

https://codepen.io/anon/pen/GNgEmJ

Comments

[Aladdin]

Спасибо большое

Answer 2

[abbrakadabbra]

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;
}

Comments

[Aladdin]

Спасибо большое