Issues getting bootstrap spacing right - html

Question

I'm having trouble getting the spacing correct.
I need to have my carousel and cards the exact way as shown on the picture
However I can't get it, wether I'm using padding margin on bootstrap columns I just can't seem to get it.
col-9 seems to be fine for the carousel length wise but then I can't get the adequate spacing between the cards using offset (offset-1 makes the spacing way off)
Code
<div class="container" id="roomijs">
<div class="row justify-content-center">
<div class="row justify-content-center">
<div class="card col-10">
<div class="card-header card-head">
Specialiteiten deze week
</div>
<div class="card-body">
<div id="carousel-card-body" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-card-body" data-slide-to="0" class="active"></li>
<li data-target="#carousel-card-body" data-slide-to="1"></li>
<li data-target="#carousel-card-body" data-slide-to="2"></li>
</ol>
<div class="carousel-inner carousel-height">
<div class="carousel-item active">
<img class="d-block w-100" src="img/blanco.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev carousel-control-left " href="#carousel-card-body" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next carousel-control-right" href="#carousel-card-body" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="card col-3">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card col-3">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card col-3">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>```

Answer 1

You just need to make sure you're following the rules of the Bootstrap grid...
columns and only columns should be the immediate children of row
content goes inside columns
The code is breaking these rules. The row has been doubled up causing double negative margins around the carousel. Also, cards should be inside col and not the same div.
<div class="container" id="roomijs">
<div class="row justify-content-center">
<div class="col-9">
<div class="card">
<div class="card-header card-head"> Specialiteiten deze week </div>
<div class="card-body">
<div id="carousel-card-body" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-card-body" data-slide-to="0" class="active"></li>
<li data-target="#carousel-card-body" data-slide-to="1"></li>
<li data-target="#carousel-card-body" data-slide-to="2"></li>
</ol>
<div class="carousel-inner carousel-height">
<div class="carousel-item active">
<img class="d-block w-100" src="//via.placeholder.com/1500x600" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="//via.placeholder.com/1500x600" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="//via.placeholder.com/1500x600" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev carousel-control-left " href="#carousel-card-body" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next carousel-control-right" href="#carousel-card-body" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">
...
</div>
</div>
<div class="col-3">
<div class="card">
...
</div>
</div>
<div class="col-3">
<div class="card">
...
</div>
</div>
</div>
</div>
Demo