Le titre de mon site se visualise mal sur un smartphone

Bonjour,

J'essaye d'améliorer un petit site internet

Lorsque la fenêtre d'affichage est trop petite (smartphone), une partie du titre n'est plus visible, mais se centre sur la droite

Le site de base
http://www.toulousesophrologie.com/

L'image sur un smartphone
http://www.toulousesophrologie.com/ecran_smart.jpg

J'ai essayé de changer les alignements, mais ça ne fonctionne pas.

La partie du code concernée donne ca

 <div class="shapes">
<h1 align="left" class="headline" data-left="2.84%">
    <a href="#">Esther BENEZECH</a>
</h1>
<h2 class="slogan" data-left="4.72%">Accompagnement psychologique - Sophrologie - Formation</h2>

Vous pouvez m'aider ?

Merci d'avance

Maxime

EDIT : Ajout des balises de code
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

.