how to make card deck and carousel overlapped - html

Question

soo im trying to make a website that look like this
u can see theres a white background between my yellow background and my carousel. is there anyway to make the background behind my card deck not white instead the same color my carousel?
HTML
<div class="row-lg" id="backcolor">
<div class="card-deck mx-auto" id="card-deck">
<div class="card">
<img src="dummy.jpg" alt="dummy" class="card-img-top">
<div class="card-body" id="cardbody1">
<h5 class="card-title" id="cardtitle1">Card 1</h5>
<p class="card-text" id="cardtext1">Card text 1</p>
</div>
</div>
<div class="card">
<img src="dummy.jpg" alt="dummy" class="card-img-top">
<div class="card-body" id="cardbody2">
<h5 class="card-title" id="cardtitle2">Card 1</h5>
<p class="card-text" id="cardtext2">Card text 1</p>
</div>
</div>
<div class="card">
<img src="dummy.jpg" alt="dummy" class="card-img-top">
<div class="card-body" id="cardbody3">
<h5 class="card-title" id="cardtitle3">Card 1</h5>
<p class="card-text" id="cardtext3">Card text 1</p>
</div>
</div>
<div class="card">
<img src="dummy.jpg" alt="dummy" class="card-img-top">
<div class="card-body" id="cardbody4">
<h5 class="card-title" id="cardtitle4">Card 1</h5>
<p class="card-text" id="cardtext4">Card text 1</p>
</div>
</div>
<div class="card">
<img src="dummy.jpg" alt="dummy" class="card-img-top">
<div class="card-body" id="cardbody5">
<h5 class="card-title" id="cardtitle5">Card 1</h5>
<p class="card-text" id="cardtext5">Card text 1</p>
</div>
</div>
</div>
</div>
CSS
#card-deck {
padding-top: 190px;
height: 450px;
width: 1200px;
margin: 0 auto;
}
#card-deck .card {
padding-left: 20px;
padding-right: 20px;
max-width: 300px;
text-align: center;
}
#card-deck .card h5 {
color: orange;
}

Answer 1

Edit: We need to make your card container float over the two elements, because setting background-color to the card element, covers the background below it.
To do this, we need modify the #card-deck
position:relative so we could adjust its position according to its parent div
add top:30px; to position it 30px below its initial position
remove the height and padding properties as we're going to rely on the cards' height
add z-index:1 to position it over the other elements
Use this css for the #card-deck
#card-deck {
width: 1200px;
margin: 0 auto;
position:relative;
top:30px;
z-index:1;
}
Here's the updated fiddle;
https://jsfiddle.net/8y4ojb5t/

Answer 2

Its because you forgot # to background-color.
Your css:
#backcolor{
background-color: F1F0F0;
}
Use this:
#backcolor{
background-color: #F1F0F0;
}
Your image is cutting because of container-fluid 's padding left and right. So you have to remove that padding.
Try this css:
.container-fluid{
padding-left: 0;
padding-right: 0;
}