Линия у заголовка справа и слева - Вопросы по CSS

<div class="lapot" style="
    background: url('/images/i1.png');
    display: block;
"><h1 class="header" style="
    background-color: #FFF;
">Наши контакты</h1></div>

<div class="headerbg"><div class="headershift">
<h1><span>Заголовок Заголовок Заголовок Заголовок </span></h1>
</div></div>

.headerbg {height:1px; background:#F00; float:left; width:100%}
.headershift {display:block; position:relative; top:-42px; float:left; width:100%; left:-50%;}
h1 {display:block; float:right; position:relative;}
h1 span {display:block; float:right; position:relative; right:-50%; padding:0 20px; background:#F63;}

<h1><span>Заголовок Заголовок Заголовок Заголовок </span></h1>

h1 {text-align:center; border-bottom:#f00 solid 1px; margin-bottom:50px;}
h1 span {display:inline-block; position:relative; top:50%; background:#0f0; padding:0 20px;}

h1 {text-align:center; border-bottom:#f00 solid 1px; margin-bottom:50px;}
h1 span {display:inline-block; position:relative; top:50%; background:#0f0; padding:0 20px;}

h1 {
position: relative;
text-align: center;
background-image: linear-gradient(to right,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0));
-webkit-background-size: 100% 1px;
-moz-background-size: 100% 1px;
-o-background-size: 100% 1px;
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: left 50%;
color: #940000;
font-size: 19px;
}
h1 span {
background: #FFF;
padding: 0 10px;
}