I created a bootstrap grid that has 3 rows with the following layout.

[![enter image description here](https://i.stack.imgur.com/koDQC.png)](https://i.stack.imgur.com/koDQC.png)

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?

```css
#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;
}
```

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