Css – Bootstrap grid incorrect width

I’m new in Boostrap and I’m in a place where I’m not able to move from… I tried many things, checking Boostrap docs, etc., but I need to help.

I have the following code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
#wrapper {background: yellow; max-width: 500px; margin: 0 auto; }
.info {background: blue;}
#side {background: red}
#data {background: orange;}
</style>
<div id="wrapper">
    <div class="row">
        <div class="col-12">
            <p id="breadcrumbs">
                Breadcrumbs
            </p>

            <h1>...</h1>
            <p class="info">
                Info<br>info<br>
            </p>

            <div class="row">
                <section id="side" class="col-md-4 col-lg-3">
                    ...
                </section>

                <section class="col-md-8 col-lg-9">
                    <div class="row">
                        <div class="col-4">
                            ...
                        </div>
                        <div class="col-8">
                            ...
                        </div>
                        <ul id="data" class="row gx-5">
                            <li class="col-4">...</li>
                            <li class="col-4">...</li>
                            <li class="col-4">...</li>
                            <li class="col-4">...</li>
                        </ul>
                    </div>
                </section>
            </div>
        </div>
      </div>
  </div>

The problem is that #breadcrumbs, h1, .info has any width (max-width of their wrapper, let’s say 1600px), but .row is bigger. It has negative left/right margin taken from _grid.scss:6.

When I set background color to #side element, it goes visually outside the grid.

Any idea what I’m doing wrong?

Thanks.

I tried to check Bootstrap manual, change the bootstrap class names, etc.
I expect the nested .row will have width 100% of its parent.

I attach image/screenshot, how it looks. At the top is visible p.info (its boundaries), at the bottom .row with red background, which is going outside the .info and their parent.

screenshot

Link to JSFiddle: https://jsfiddle.net/e3fxnthp/