Bootstrap 5 Block padding, how to do it right?

Question

css

Hello! I need to have a fairly large indent between the blocks, now I did it this way:

@extends('layouts.app')

@section('title')
    Главная страница
@endsection

@section('home')
    <div class="container p-5 mt-5">
        <div class="row col-12">
            <div class="col-lg-8 sm-12 bg-light border rounded">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio quod omnis maxime. Nisi nulla, asperiores
                consequatur dignissimos unde eius eaque laudantium? Odio nulla distinctio officia illo nisi aut magnam
                itaque?
            </div>
            <div class="col-1 p-3"></div>
            <div class="col-lg-3 sm-12 bg-light border rounded">
                @include('includes.sidebar')
                @show
            </div>
        </div>
    </div>
@endsection

Those. added one block between them without information. This is how it looks like:

Demonstration

The question is the following, some inner instinct tells me that this is wrong. Is it so? And if so, how to write correctly?

Answer 1

bootstrap 5 has css variables for this

.row {
  --bs-gutter-x: 60px;
}