html - Cannot change the background of the container and there is an unexplainable gap between jumbotron and container -

i cannot following work

1) remove gap between jumbotron , container

2) change background color of container-flux (i can change background color if change background-color in .container-flux cannot change adding class it. don't want container-flux have same background color need function)

my jumbotron code below

    <div class="jumbotron">     <h1 class="display-3">place nice quote</h1>     <p class="lead">this simple hero unit, simple jumbotron-style component calling attention featured content or information.</p>     <hr class="m-y-2">     <p>it uses utility classes typography , spacing space content out within larger container.</p>     <p class="lead">     </p> </div> 

just below have container-flux code

    <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> 

my relevant css are

    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; } 

screenshot of image:

the first div jumbotron , second div blackbackground (container-flux) , in between have unexplainable white gap changed background setting background-color:black in .container-flux show gap. if go background-color:black in class , add class same div, cannot change color.