Bootstrap 网格宽度不正确

问：

我是 Boostrap 的新手，我在一个我无法离开的地方......我尝试了很多东西，检查 Boostrap 文档等，但我需要帮助。

我有以下代码：

<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>

问题是 #breadcrumbs、h1、.info 有任何宽度（包装器的最大宽度，假设 1600px），但 .row 更大。它的左/右边距为负，取自 _grid.scss：6。

当我将背景颜色设置为 #side 元素时，它在视觉上会超出网格。

知道我做错了什么吗？

谢谢。

我尝试检查 Bootstrap 手册、更改 bootstrap 类名等。 我希望嵌套的 .row 的宽度为其父级的 100%。

我附上图像/屏幕截图，它的外观。顶部是可见 p.info（其边界），底部是红色背景的 .row，它位于 .info 及其父级之外。

截屏

链接到 JSFiddle：https://jsfiddle.net/e3fxnthp/