I am a newcomer to Boostrap and I find myself in a bit of a sticky situation...I have tried numerous solutions, consulted the Boostrap documentation, but I still require assistance.
Here is the code snippet:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b383f6edf1edf0">[email protected]</a>/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 issue lies in the fact that #breadcrumbs, h1, .info do not have any width (max-width of their wrapper being 1600px), while .row extends beyond this width. It inherits negative left/right margin from _grid.scss:6.
When I apply a background color to the #side element, it visually exceeds the grid boundaries.
Any thoughts on what could be going wrong here?
Thank you.
I have made attempts to consult the Bootstrap manual, modify the bootstrap class names, etc. My expectation is for the nested .row to have a width of 100% relative to its parent.
I have attached an image/screenshot depicting how it appears. The top shows p.info (its borders), while at the bottom is the .row with a red background, extending outside both .info and its parent elements.
Link to JSFiddle: https://jsfiddle.net/e3fxnthp/