Wie wird das Hintergrundbild auf die volle Länge eingestellt und der Text wird zentriert?

Question

Mein Header-Banner ist auf 100% Breite eingestellt, aber es bedeckt nicht alles auf der Oberseite sieht es wie seine 70% und Text ist nicht in der Mitte, Wenn ich Element in Chrom überprüft zeigt es 100% Breite aber in der tatsächlichen Anzeige es nicht. Wie kann ich dieses Problem beheben?

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

ausprobieren:

.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

Bootstrap Reihen haben einen Spielraum mit ihnen verbunden sind. Wenn Sie Bootstrap-Zeilen verwenden, wird es immer einen Rand geben, wenn Sie das nicht in CSS entfernen.