I'm currently working with Bootstrap 4.1 and I have a grid layout consisting of cells (Box A-E) with some space between them. The issue I'm facing is that when I apply padding to each column, it also adds padding to the left and right sides, causing alignment problems with other elements, such as aligning Box A and Box D with the left edge of the Top Box.
I've read about using negative margins to correct this issue, but I'm not sure where exactly to implement it in my code.
The grid of boxes is dynamic and could potentially have a large number of elements. I want to maintain consistent styling across all boxes without having to make individual adjustments.
Additionally, I want to avoid making changes to the Top Box, as it represents many existing UI elements on my page that are difficult to modify.
https://i.sstatic.net/ZO3Lv.png
Here's the link to the JSFiddle for reference: https://jsfiddle.net/u5094cjb/2/
body {
margin: 1rem;
}
.box {
border: 1px solid black;
background-color: white;
margin-bottom: 0.1rem;
}<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<div class="container">
<!-- Please refrain from modifying this section -->
<div class="row">
<div class="col">
<div class="box">Top Box</div>
</div>
</div>
<!-- You can make changes to this part only -->
<div class="row">
<div class="col">
<div class="container">
<div class="row">
<div class="col-4 px-1">
<div class="box">Box A</div>
</div>
<div class="col-4 px-1">
<div class="box">Box B</div>
</div>
<div class="col-4 px-1">
<div class="box">Box C</div>
</div>
<div class="col-4 px-1">
<div class="box">Box D</div>
</div>
<div class="col-4 px-1">
<div class="box">Box E</div>
</div>
</div>
</div>
</div>
</div>
</div>