如何将背景图像设置为全长并使文本居中对齐？

Question

My header-banner is set to width 100% but its not covering everything on the top it looks like its 70% and text is not setting to center, When i inspect element in chrome it shows 100% width but in actual display it does not. How can i fix this issue ?

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

Try It:

.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 rows have a margin associated with them. So when using bootstrap rows there will always be a margin unless you remove that in CSS.