Как отцентровать текст внутри класса?

Question

[mUchenik]

Всем добра, уважаемые специалисты!
Вопрос вот какой:
Есть следующая запись:

<h3 class="text_zag">текст заголовка</h3>

И есть CSS:

.blok {
    background: #48b7c4;
    height: 2em;
    color: white;
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    padding: 8px;
    border-radius: 6px;

@media (max-width: 425px)
style.css?ver=4.8.1:232
.blok {
    height: 3em;
}

Проблема в том, что когда открываю в мобильном виде, то текст не полностью входит в блок класса.
Можно ли сделать, что бы сам class="text_zag" принимал ширину относительно текста?

Другими словами, у меня несколько текст заголовка но кол-во знаков разное и нужно сделать так, что бы в классе, где мало текстовых знаков синего поля было минимум, но в то же время в блоке где много текстовых знаков весь текст умещался в синее поле и это поле расширялось относительно кол-ва текстовых знаков.

Comments

[Максим Софронов]

@media (max-width: 425px)
style.css?ver=4.8.1:232
.blok {
    height: 3em;
}

это что вообще за запись такая?

Answer 1

[spike__x]

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

Answer 2

[Gabe Jonson]

text-align: center на родителя и посмотреть ничего ли не ограничивает ширину. (В .blok не вижу, глянь в родителе)
и с blok убрать text-align: left;