//Edit: solo se mueve el `row-1` porque a los demás les estás dando una posición absoluta. Veo que tienes creada una clase en la etiqueta `section`, podrías aplicar un `margin` a esta etiqueta para poder bajar los items: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .title { font-family: var(--font-Retro); text-align: center; text-shadow: 2px 2px var(--pink-light); letter-spacing: 0.5px; font-size: 40px; margin-top: 50px; } .type-1 { color: var(--pink-retro); } .type-2 { color: white; font-size: 33px; top: 147px; /*position: absolute;*/ left: 51%; } #row-1 { font-size: 57px; } #row-3 { top: 166px; left: 42%; z-index: -1; /*position: absolute;*/ } .section-home { width: 100%; text-align: center; position: absolute; margin-top: 10%; } <!-- language: lang-html --> <html> <head> <title>HOLA MUNDO</title> </head> <body> <section class="section-home"> <h1 class="title"> <span class="type-1" id="row-1">Hey, there</span></br> <span class="type-2" id="row-2">I'm</span></br> <span class="type-1" id="row-3">María Antonieta</span> </h1> </section> </body> </html> <!-- end snippet -->