Bootstrapのテンプレートを使って試行錯誤をしているのですが、このようにサイドバーとメインバーが重なってしまいます。カードを三つ全体表示させたいのですが、どうしたらいいでしょう？

追記

こちらファイル全体になります。

HTML
1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <meta name="description" content="">
7    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
8    <meta name="generator" content="Hugo 0.80.0">
9    <title>Dashboard Template · Bootstrap v5.0</title>
10
11    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/dashboard/">
12
13    
14
15    <!-- Bootstrap core CSS -->
16<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
17
18    <style>
19      .bd-placeholder-img {
20        font-size: 1.125rem;
21        text-anchor: middle;
22        -webkit-user-select: none;
23        -moz-user-select: none;
24        user-select: none;
25      }
26
27      @media (min-width: 768px) {
28        .bd-placeholder-img-lg {
29          font-size: 3.5rem;
30        }
31      }
32    </style>
33
34    
35    <!-- Custom styles for this template -->
36    <link href="dashboard.css" rel="stylesheet">
37  </head>
38  <body>
39    
40<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
41  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
42  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
43    <span class="navbar-toggler-icon"></span>
44  </button>
45  <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
46  <ul class="navbar-nav px-3">
47    <li class="nav-item text-nowrap">
48      <a class="nav-link" href="#">Sign out</a>
49    </li>
50  </ul>
51</header>
52
53<div class="container-fluid">
54  <div class="row">
55    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
56      <div class="position-sticky pt-3">
57        <ul class="nav flex-column">
58          <li class="nav-item">
59            <a class="nav-link active" aria-current="page" href="#">
60              <span data-feather="home"></span>
61              Dashboard
62            </a>
63          </li>
64          <li class="nav-item">
65            <a class="nav-link" href="#">
66              <span data-feather="file"></span>
67              Orders
68            </a>
69          </li>
70          <li class="nav-item">
71            <a class="nav-link" href="#">
72              <span data-feather="shopping-cart"></span>
73              Products
74            </a>
75          </li>
76          <li class="nav-item">
77            <a class="nav-link" href="#">
78              <span data-feather="users"></span>
79              Customers
80            </a>
81          </li>
82          <li class="nav-item">
83            <a class="nav-link" href="#">
84              <span data-feather="bar-chart-2"></span>
85              Reports
86            </a>
87          </li>
88          <li class="nav-item">
89            <a class="nav-link" href="#">
90              <span data-feather="layers"></span>
91              Integrations
92            </a>
93          </li>
94        </ul>
95    </nav>
96
97    <main class="ml-20em">
98      <div class="album py-5 bg-light">
99        <div class="container">
100    
101          <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 ml-20em">
102            <div class="col ml-2em">
103              <div class="card shadow-sm">
104                <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
105    
106                <div class="card-body">
107                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
108                  <div class="d-flex justify-content-between align-items-center">
109                    <div class="btn-group">
110                      <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
111                      <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
112                    </div>
113                    <small class="text-muted">9 mins</small>
114                  </div>
115                </div>
116              </div>
117            </div>
118            <div class="col">
119              <div class="card shadow-sm">
120                <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
121    
122                <div class="card-body">
123                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
124                  <div class="d-flex justify-content-between align-items-center">
125                    <div class="btn-group">
126                      <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
127                      <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
128                    </div>
129                    <small class="text-muted">9 mins</small>
130                  </div>
131                </div>
132              </div>
133            </div>
134            <div class="col">
135              <div class="card shadow-sm">
136                <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
137    
138                <div class="card-body">
139                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
140                  <div class="d-flex justify-content-between align-items-center">
141                    <div class="btn-group">
142                      <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
143                      <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
144                    </div>
145                    <small class="text-muted">9 mins</small>
146                  </div>
147                </div>
148              </div>
149            </div>
150          </div>
151        </div>
152      </div>
153    
154    </main>
155  </div>
156</div>
157
158
159    <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
160
161      <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script><script src="dashboard.js"></script>
162  </body>
163</html>
164

CSS
1body {
2  font-size: .875rem;
3}
4
5.feather {
6  width: 16px;
7  height: 16px;
8  vertical-align: text-bottom;
9}
10
11/*
12 * Sidebar
13 */
14
15.sidebar {
16  position: fixed;
17  top: 0;
18  /* rtl:raw:
19  right: 0;
20  */
21  bottom: 0;
22  /* rtl:remove */
23  left: 0;
24  z-index: 100; /* Behind the navbar */
25  padding: 48px 0 0; /* Height of navbar */
26  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
27}
28
29@media (max-width: 767.98px) {
30  .sidebar {
31    top: 5rem;
32  }
33}
34
35.sidebar-sticky {
36  position: relative;
37  top: 0;
38  height: calc(100vh - 48px);
39  padding-top: .5rem;
40  overflow-x: hidden;
41  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
42}
43
44.sidebar .nav-link {
45  font-weight: 500;
46  color: #333;
47}
48
49.sidebar .nav-link .feather {
50  margin-right: 4px;
51  color: #727272;
52}
53
54.sidebar .nav-link.active {
55  color: #007bff;
56}
57
58.sidebar .nav-link:hover .feather,
59.sidebar .nav-link.active .feather {
60  color: inherit;
61}
62
63.sidebar-heading {
64  font-size: .75rem;
65  text-transform: uppercase;
66}
67
68/*
69 * Navbar
70 */
71
72.navbar-brand {
73  padding-top: .75rem;
74  padding-bottom: .75rem;
75  font-size: 1rem;
76  background-color: rgba(0, 0, 0, .25);
77  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
78}
79
80.navbar .navbar-toggler {
81  top: .25rem;
82  right: 1rem;
83}
84
85.navbar .form-control {
86  padding: .75rem 1rem;
87  border-width: 0;
88  border-radius: 0;
89}
90
91.form-control-dark {
92  color: #fff;
93  background-color: rgba(255, 255, 255, .1);
94  border-color: rgba(255, 255, 255, .1);
95}
96
97.form-control-dark:focus {
98  border-color: transparent;
99  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
100}
101