バックグラウンドイメージを全長に設定し、テキストを中央に揃えるには？

Question

私のheader-bannerは幅100％に設定されていますが、上のすべてが70％のように見えず、テキストが中央に設定されていません。クロムの要素を調べると100％の幅を表示しますが、ではない。どうすればこの問題を解決できますか？

main.htmlを

<div class="row"> 
    <div class="col-md-12"> 
     <div class="header-banner"> 
      <h1>Server</h1> 
     </div> 
    </div> 
</div> 

のmain.css

.header-banner { 
    background:url('../img/header_master.jpg'); 
    width:100%; 
    min-height:70px; 
    background-repeat: no-repeat; 
    text-align: center; 
} 

Answer 1

はそれを試してみてください。

.header-banner { 
     background:url('../img/header_master.jpg'); 
     width:100%; 
     min-height:70px; 
     background-repeat: no-repeat; 
     text-align: center; 
     background-size: cover; 
    } 

Answer 2

ブートストラップの行は、それらに関連付けられているマージンを持っています。したがって、ブートストラップ行を使用する場合は、CSSでそれを削除しない限り、常に余白があります。