Слово вылазит за пределы экрана

Доброго времени суток, возникла трудность. у меня имеется текст в блоке H1

<section id="intro" class="full-height"> 
	<div class="content vertical-center"> 
		<h2>Делаем хорошие косметические ремонты</h2> 
     </div> 
</section>

Собственно CSS который задает ему ширину в 100vh и выравнивает по центу. В итоге имеем стандартное масштабирование которое отлично работает при изменении ширины экрана. (По слову строчке). Но вот есть загвоздка, при разрешении экрана 320px слово "Косметические" вылазит за край экрана и получается только "Косметичес" хотя до края экрана (с левой стороны еще есть место), и по сути слово должно поместиться.

Погуглив внес некоторые коррективы в header index.html но увы не помогло:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>

Какие тонкости могут быть тут?