Bootstrap 5 Columns Add Gutter

I have created a simple dashboard. The dashboard consists of 3 areas: Header, sidebar and content area. Within the content area I will have the main content of the page along with a Coming Up/ToDo list with a calendar link.

In the sample picture I am unable to create a gutter between the "Dashboard" column/area and the "Coming Up" column/area

I am making this site in aspnet, so some of the items in my layout.cshthml page are specific to the technology

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content="@ViewBag.Keywords">
    <meta name="description" content="@ViewBag.Description">
    <title>
        @ViewData["Title"]
    </title>
    <partial name="_Css" />
</head>

<body>
<header>
    <partial name="_Js" />
    <partial name="_TopNav" />
</header>
    <div class="container-fluid">
        <div class="row">
            <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0" style="background-color: #1C4932">
                <partial name="_DashboardSidebar" />
            </div>
            
            <div class="col content-background">
                <div class="container-fluid">
                    <div class="row">
                        @await Component.InvokeAsync("BreadCrumb")
                        <partial name="_Alert"/>
                        <partial name="_ValidationSummary"/>
                    </div>
                    
                    <div class="row gx-1">
                        <div class="col-md-9 backgroundWhite">
                            @RenderBody()
                        </div>
                        <div class="col-md-3 backgroundWhite">
                            <partial name="_UpComingEvents"/>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@await RenderSectionAsync("Scripts", required: false)
@await Component.InvokeAsync("Notyf")
<ejs-scripts></ejs-scripts>
</body>

</html>

TopNav

<nav class="navbar navbar-expand-md navbar-toggleable-md navbar-light bg-white border-bottom box-shadow">
    <div class="container">
        @await Component.InvokeAsync("TenantLogo")
    </div>
    <div class="container">
        <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" class="navbar-toggler">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                @if (User.FindFirst(x => x.Type == "name") is not null)
                {
                    <li class="nav-item">
                        <a class="btn" asp-page="/Account/Signout">@Localizer["Signout"]</a>
                    </li>
                }
                else
                {

                    <li class="nav-item">
                        <a class="btn" asp-page="/Account/Login">@Localizer["Login"]</a>
                    </li>
                    <li class="nav-item">
                        <a class="btn" asp-page="/Account/Register">@Localizer["Register"]</a>
                    </li>
                }
            </ul>
        </div>
    </div>
</nav>

SideBar

<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 mb-auto min-vh-100" style="background-color: #1C4932">
    <a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
        <span class="fs-5 d-none d-sm-inline">Menu</span>
    </a>
    <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
        <li>
            <a asp-page="/Dashboard/Index" class="nav-link px-0 align-middle text-white">
                <i class="fa-thin fa-gauge"></i> <span class="ms-1 d-none d-sm-inline">@Localizer["Dashboard"]</span>
            </a>
        </li>
        <li>
            <a asp-page="/Dashboard/Index" class="nav-link px-0 align-middle text-white">
                <i class="fa-thin fa-envelope"></i> <span class="ms-1 d-none d-sm-inline">@Localizer["Communications"]</span>
            </a>
        </li>
        <li>
            <a asp-page="/Dashboard/Settings/Index" class="nav-link px-0 align-middle text-white">
                <i class="fa-thin fa-chart-bar"></i> <span class="ms-1 d-none d-sm-inline">@Localizer["Reports"]</span>
            </a>
        </li>
        <li>
            <a asp-page="/Dashboard/Settings/Index" class="nav-link px-0 align-middle text-white">
                <i class="fa-thin fa-gear"></i> <span class="ms-1 d-none d-sm-inline">@Localizer["Settings"]</span>
            </a>
        </li>
        <li>
            <a asp-page="/Dashboard/Settings/Index" class="nav-link px-0 align-middle text-white">
                <i class="fa-thin fa-user"></i> <span class="ms-1 d-none d-sm-inline">@Localizer["Profile"]</span>
            </a>
        </li>
        <li>
            <a asp-page="/Dashboard/Help/Index" class="nav-link px-0 align-middle text-white">
                <i class="fa-thin fa-question-circle"></i> <span class="ms-1 d-none d-sm-inline">@Localizer["Help"]</span>
            </a>
        </li>
    </ul>
</div>

Bread Crumb

<nav aria-label="breadcrumb" class="mt-2">
    <ol class="breadcrumb">
        @foreach (var breadCrumb in Model)
        {
            if (!breadCrumb.IsCurrentCrumb)
            {
                <li class="breadcrumb-item"><a asp-page="@breadCrumb.CrumbUrl">@breadCrumb.Crumb</a></li>
            }
            else
            {
                <li class="breadcrumb-item active" aria-current="page">@breadCrumb.Crumb</li>
            }
        }
    </ol>
</nav>

BackgroundWhite CSS class

.backgroundWhite {
    background-color: white;
    padding: 15px;
    border-radius: 10px;
}

I can't seem to create a gutter in the main content area between "Dashboard" column and "Coming Up" column. I am sure I have done something wrong since I am not a bootstrap expert. Any help would be appreciated.

Solution

Change like below:

<div class="row gx-1">
    <div class="col-md-9 ">
        <div class="p-3 backgroundWhite ">
             @RenderBody()
        </div>  
    </div>
    <div class="col-md-3 ">
        <div class="p-3 backgroundWhite">
             <partial name="_UpComingEvents"/>
        </div>

    </div>
</div>

Reference: Gutters