Align bootstrap cards with filter forms on the left

I am trying to align the cards using row and col- classes from bootstrap. The first three work as its supposed to but the fourth one doesnt do what i want it to do. Does anyone have an idea as to why this is happening and maybe also have a solution for me?

The problem in question

this is my code:

<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="form">
<i class="fa fa-search"></i>
<input type="text" class="form-control form-input" placeholder="Search anything...">
<span class="left-pan"><i class="fa fa-microphone"></i></span>
</div>
</div>
<div id="mobile-filter">
<div>
<ul>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
</li>
</ul>
<div>
<div class="border-bottom"></div>
<ul class="list-group">
<label for="customRange1" class="form-label">Price per hour</label>
<input type="range" class="form-range" id="customRange1">
</ul>
</div>
<div>
<ul class="list-group">
<label for="customRange1" class="form-label">Price per hour</label>
<input type="range" class="form-range" id="customRange1">
</ul>
</div>
</div>
<div>
</div>
<div>
</div>
</div>
<section id="sidebar">
<div>
<ul>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
</li>
</ul>
</div>
<div>
<div class="border-bottom"></div>
<ul class="list-group">
<label for="customRange1" class="form-label">Price per hour</label>
<input type="range" class="form-range" id="customRange1">
</ul>
</div>
<div>
<ul class="list-group">
<label for="customRange1" class="form-label">Price per hour</label>
<input type="range" class="form-range" id="customRange1">
</ul>
</div>
</section>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 col-xxl-3 boat" *ngFor="let boat of boats">
<div class="card">
<img src="/{{ boat.src }}" class="card-img-top" alt="{{ boat.name }}">
<div class="card-body">
<h5 class="card-title">{{ boat.name }}</h5>
<p class="card-text">{{ boat.description }}</p>
<p>{{ boat.city }}</p>
</div>
</div>
</div>
</div>
</div>

This is the scss file that goes with it:

.form {
position: relative;
}
.form .fa-search {
position: absolute;
top: 20px;
left: 20px;
color: #9ca3af;
}
.form span {
position: absolute;
right: 17px;
top: 13px;
padding: 2px;
border-left: 1px solid #d1d5db;
}
ul {
list-style: none;
}
li a {
text-decoration: none;
}
li a:hover {
text-decoration: none;
}
.left-pan {
padding-left: 7px;
}
.left-pan i {
padding-left: 10px;
}
.form-input {
height: 55px;
text-indent: 33px;
border-radius: $br-160;
}
.form-input:focus {
box-shadow: $shadow-black-lg;
border: $b-1 $b-solid $grey;
}
.card {
margin-top: $m;
width: 100%;
height: 350px;
border-radius: $br-100;
overflow: hidden;
}
.card img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: 50% 50%;
}
#sidebar {
width: 20%;
padding: 10px;
margin: 0;
float: left;
}
ul {
padding: 5px;
}
li a {
color: $grey;
}
li a:hover {
color: $tertiary;
}
.navbar-nav {
margin-left: 35%;
}
.nav-item {
padding-left: 20px;
}
#mobile-filter {
display: none;
}
.boat {
padding-left: $p-xs;
padding-right: $p-xs;
}

All help is highly appreciated!

Good start, you should treat the whole width as row - then set col-4 vs col-8 to sidebar and your main content or right respectively.

Your forth boat is sliding because... well, it has space there! If you set it's (all boats) container to be col-8 of the whole screen, you can then create flex or grids inside as you will and it won't let your items to slide outside of defined space - it will wrap element down, moving it below first card or allow you to make eg. infinite horizontal scroll with all boats being visible in one row.