无法改变容器的背景，并且在jumbotron和容器之间存在无法解释的差距

Question

我无法让以下工作

1）消除jumbotron和容器之间的差距

2）更改容器 - 助焊剂的背景颜色（如果我在.container-flux中更改背景颜色，我可以更改背景颜色但是我不能通过添加另一个类来改变它。我不会＆＃39;我希望我的所有容器助焊剂都具有相同的背景颜色，所以我需要这个功能）

我的jumbotron代码在

之下

    <div class="jumbotron">
    <h1 class="display-3">Place for a nice quote</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <hr class="m-y-2">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <p class="lead">
    </p>
</div>

就在它下面我有容器通量代码

    <div class="container-flux">

    <div class="row first-row">

        <div class="col-md-2 offset-md-2 first-card">

            <div class="card">
                1
            <div class="card-block">
                20
            </div>
            </div>

        </div>
    </div>

    <div class="row second-row">
        <div class="col-md-2 offset-md-5 second-card">

            <div class="card">
                1
            <div class="card-block">
                20
            </div>
            </div>

        </div>
    </div>
    <div class="row third-row">
        <div class="col-md-2 offset-md-8 third-card">

            <div class="card">
                1
            <div class="card-block">
                20
            </div>
            </div>

        </div>
    </div> 
</div>

我的相关css是

    html body div {
    width: 100%;
    height: 100%;
}

.nav-item{
    font-size: 130%;
    color: white; 
}

.nav-link{
    color: white;
    padding-top: 2px;
}

.nav-link:hover{
    color: #9E9E9E;
}

.nav-inline{
    background-color: black;
    padding: 10px;
    padding-top: 5px;
}

.nav{
    position: fixed;
    width: 100%;
    height: auto;
}

.welcome{
    clear: both;
    float: left;
    padding-left: 10px;
    color: white;
    padding-right: 20px;
    font-size: 120%
}

.jumbotron{
    background-image: url(../img/top-background.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    margin: 0px;
    padding: 0px;
    height: 400px;
}

.first-container{
    background-color: blue;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

.first-card{
    text-align: center;
    align-content: center;
}

.second-row{
    align-content: center;
}

.clear{
    clear: both;
}

.container-flux{
    background-color: black;
}

我的图片截图：

第一个div是jumbotron，第二个div是blackbackground（容器 - 通量），介于两者之间我有无法解释的白色差距 我通过在.container-flux中设置background-color：black来改变背景以显示差距。但是如果我去背景颜色：在另一个类中使用黑色并将该类添加到同一个div中，我就无法更改颜色。