I've come across a roadblock here.
The issue arises when attempting to fill the Bootstrap row while also utilizing mr (or ml). Initially, I attempted to calculate the numbers so that they add up to 12. In my 3-column layout, I have a column of 5, followed by a column of 4, leaving 3 remaining columns, right?
However, everything functions as expected until I introduce mr (margin-right) between the boxes/columns, causing all my boxes (columns) to stick together. Upon adding mr (greater than 0), the 3rd column is pushed below.
While I understand the problem, I'm unsure of how to navigate around it.
I "resolved" this by assigning the 3rd column a col-xl-2 width, but then it fails to fill up the space at the end of the row. I thought col-lg-auto would fix this issue, but in reality, it makes the column even narrower. Manipulating column widths and similar aspects doesn't seem to be the solution as it compromises the page's responsiveness. So, what is the correct approach?
This seems to be an ongoing issue – as the resolution decreases and the 3rd column is automatically pushed down, the 2nd column fails to occupy the entire space of the first row again.
Here is my code snippet:
<div class="row row-center">
<div class="col- col-sm-12 col-md-12 col-lg-7 col-xl-5 col-center mr-3 p-0">
<div class="tile-first-row-text">
Latest Events
</div>
</div>
<div class="col- col-sm-12 col-md-12 col-lg-4 col-xl-4 col-center mr-3 p-0">
<div class="tile-first-row-text">
Table
</div>
</div>
<div class="col- col-sm-12 col-md-12 col-lg-12 col-xl-2 col-center p-0">
<div class="tile-first-row-text">
Prediction Cup
</div>
</div>