html - 页眉未覆盖整个屏幕

Question

我试图让我的主页 (www.insaka.org) 的背景图片覆盖整个屏幕宽度，但我似乎无法弄清楚。 我不想拉伸(stretch)整个网站，只拉伸(stretch)图片。有什么想法吗？

HTML

<header class="business-header">
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6">
        </div>
        <div class="col-sm-6 top-buffer">
            <h1 class="tagline">Insaka</h1>
            <h4 class="tagline">Increasing access to education for rural Zambian girls</h4>
        </div>
    </div>
</div>

CSS

.business-header {
background: url("/images/Insaka poster girls.JPG") center center no-repeat scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
}

main {
  @extend .container;
  margin-top: 30px; // accommodate the navbar
}

section {
  @extend .row;
  margin-top: 20px;
}

Answer 1

好吧，html 结构有很多问题。您需要优秀的前端开发人员来解决问题。

我能提供的最简单的解决方案是将以下样式应用于主标记

main {
    width: 100%;
    max-width: 100%;
    padding: 0;
}