Итак, представьте себе, вы решили на сайт разместить заголовок, вы пишите Заголовок, в стилях пишите h1{text-align:center}. Всё хорошо, всё замечательно. Но при этом лично мне нужно, что в том случае, когда слова в заголовке не умещаются в строку и переносятся на другую строку, ширина заголовка формировалась по факту наличия слов.
Вот вам пример:

Зелёной рамкой обозначена фактическая ширина h1. Только сейчас слева и справа есть отступы, которые я выделил красным цветом, а нужно, чтобы ширина h1 формировалась по факту того, что написано в h1. Как это сделать?
UPD: Живой пример проблемы:
https://jsfiddle.net/egpztqvp/ . Отступы слева и справа быть не должны.