Add margin between items in a bootstrap grid - html

Question

I created a bootstrap grid that has 3 rows with the following layout.
All I'm trying to do is add a bit of margin between them but as you can see, the columns and rows are not longer properly aligned.
Is there a way to fix it or maybe there's a better way to achieve what I want?
#featured {
margin-bottom: 15px;
}
.featured-1 {
height: 200px;
}
.featured-2 {
height: 50%;
margin-left: 5px;
}
.featured-3 {
height: 50%;
margin-left: 5px;
margin-top: 5px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row featured-1" id="featured">
<div class="col-md-7 col-sm-12 bg-warning">
Featured 1
</div>
<div class="col-md-5">
<div class="row featured-2">
<div class="col-md-12 col-sm-12 bg-danger">
Featured 2
</div>
</div>
<div class="row featured-3">
<div class="col-md-12 col-sm-12 bg-success">
Featured 3
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 bg-primary">For reference</div>
</div>
</div>

Answer 1

The official bootstrap document recommended the use of Gutter.
you can do this like below:
.featured-1 {
height: 200px;
}
.featured-2, .featured-3 {
height: 50%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row featured-1" id="featured">
<div class="col-md-7 col-sm-12 bg-warning">
Featured 1
</div>
<div class="col-md-5 px-4">
<div class="row featured-2">
<div class="col-md-12 col-sm-12 bg-danger">
Featured 2
</div>
</div>
<div class="row featured-3">
<div class="col-md-12 col-sm-12 bg-success gy-2">
Featured 3
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-primary gy-2">For reference</div>
</div>
</div>

Answer 2

There's already padding on the columns, which acts as gutters. I'd put the background on your column content instead.
#featured {
margin-bottom: 15px;
}
.featured-1>div {
height: 200px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row" id="featured">
<div class="col-7 featured-1">
<div class="bg-warning">Featured 1</div>
</div>
<div class="col-5 d-flex flex-column">
<div class="featured-2 flex-grow-1 bg-danger mb-1">Featured 2</div>
<div class="featured-3 flex-grow-1 bg-success mt-1">Featured 3</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="bg-primary">For reference</div>
</div>
</div>
</div>