猫头鹰旋转木马2在Bootstrap 4上显示的宽度不正确

Question

我有一些带有Bootstrap标记的HTML：

<div class="container">
    <div class="row">
        <div class="col-lg">
            <div class="row">
                <div class="grid-container">
                    <div class="grid-item">1</div>
                    <div class="grid-item">2</div>
                    <div class="grid-item">8</div>
                    <div class="grid-item">9</div>
                    <div class="grid-item d-none d-sm-block">10</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="owl-carousel owl-theme">
                        <div class="row item"><h4>1</h4></div>
                        <div class="row item"><h4>2</h4></div>
                        <div class="row item"><h4>3</h4></div>
                        <div class="row item"><h4>4</h4></div>
                        <div class="row item"><h4>5</h4></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg sidebar border">
            <div>Sidebar</div>
        </div>
    </div>
</div>

<script>
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
});
</script>

        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto;
            justify-content: space-between;
            grid-gap: 10px;
            margin: 0 auto;
        }
        .grid-item {
            width: 100px;
            height: 100px;
            border: 1px solid #efefef;
            border-radius: 5px;
        }
        .sidebar {
                max-width: 100%;
        }

        @media (min-width: 576px) {
            .grid-container {
                display: grid;
                grid-template-columns: auto auto auto auto auto;
                justify-content: space-between;
                grid-gap: 10px;
                margin: 0 auto;
            }

        }

        @media (min-width: 992px) {
            .sidebar {
                max-width: 320px;
            }
        }

左侧是主要内容，右侧是侧边栏，在没有Owl Carousel 2的情况下，它可以完美工作，但是当我添加此滑块时，它会破坏侧边栏。

谁能告诉我，我对该代码有何疑问？

谢谢