Как доделать блок div с border и заголовком?

Question

[Алексей Королёв]

Нужен блок с рамкой и заголовком. Сумел сверстать только такое. Но внутрь ничего толком не вставишь из за padding, помогите доделать блок, чтобы он работал адекватно и подходил под адаптивный дизайн.

<div class="borderbox">
<div class="titcenter"><div class="tittop"><i class="fa fa-rocket fire" aria-hidden="true"></i> Похожие новости</div></div>
</div>
<style>
  .borderbox {border: 1px solid rgb(192, 192, 192);padding: 200px 200px 0px 200px;z-index:1px;}
    .titcenter {margin: 0 auto;text-align:center;}
    .tittop {margin-top:-219px;background:#eeeeee;text-height:20px;font-size:25px;}
    .fire {color:#f94f4f;font-size:30px;margin-right:20px;}
    }
</style>

Answer 1

[Андрей Федоров]

Это не так делается.
https://codepen.io/aliencash/pen/qpPNQV

Comments

[Алексей Королёв]

Спасибо большое! Очень помог. Буду учится дальше осваивать вёрстку

Answer 2

[Ankhena]

Держите https://jsfiddle.net/Lwhjdkvc/
Просто паддинги были лишними или не к тому месту.

(А семантику старайтесь не нарушать по мере возможностей)

Comments

[Алексей Королёв]

Спасибо большое! Очень помог. Буду учится дальше осваивать вёрстку

Answer 3

[Артём Ведищев]

Всем привет.
https://jsfiddle.net/umbxpke6/
Мой вариант.

PS вариант 2
https://jsfiddle.net/umbxpke6/1/

Comments

[Алексей Королёв]

Спасибо большое! Очень помог. Буду учится дальше осваивать вёрстку