/* É o mesmo CSS, minificado */
*{box-sizing:border-box;margin:0;padding:0}header{background:url(https://i.sstatic.net/FFTx9.jpg) center center/cover;height:auto;padding:10% 10px;width:100%;display:-webkit-flex;display:flex;-webkit-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:center;justify-content:center}h2,span{-webkit-flex:1 0 auto;flex:1 0 auto}.line{background:#fff;margin-top:12px;height:4px;width:auto}h2{color:#fff;text-align:center}
<header>
<span class='line'></span>
<h2 class='title'>Olá, você me acha um título muito grande?</h2>
<span class='line'></span>
</header>
Execute o bloco de código em tela cheia. Se estiver no Firefox, use o atalho ctrl + shift + m para iniciar o modo de design adaptável e ver como as linhas são posicionadas conforme a tela é redimensionada.