Центрированный заголовок поверх горизонтальной линии — как сделать адаптивным?

Question

[owlblinked]

Доброго времени суток!
Есть проблема, над которой я ломаю голову. Нужно сделать центрированный заголовок поверх горизонтальной линии адаптивным. Вот мой код - codepen.io/owlblinked/pen/yYPKBd Загвоздка в том, что при уменьшении размера экрана, линии уменьшаются и весь квадрат блок визуально распадается. Необходимо, чтобы линии держали визуально квадрат и, соответственно, уменьшались настолько, насколько необходимо, чтобы помещаться полностью всегда в блоке. Спасибо за помощь, вы меня очень выручите.

Answer 1

[Кирилл]

Непонятно зачем вы так нагородили. Делайте проще. Используйте бордер и не будет проблем. Вот пример - codepen.io/GoooodBoy/pen/zvPyJL

Answer 2

[Андрей]

Как вариант сделать так
codepen.io/Allardcool/pen/OyOrEM
Не стал еще добавлять, нужно посмотреть при достижении какой ширины вам нужно будет в медиа уменьшить отступы у паддингов h1.about-us__title

@media ширина{
.about-us__title{
padding-left:
padding-right:
}
}