I primarily focus on backend development, so my knowledge of html/css is quite limited. However, I have been tasked with creating a new page on a web portal and I could use some assistance.
The main issue I am facing relates to the layout structure, which looks something like this:
<div class="page">
<div class="panel">
<div class="panel-heading">
<!--content-->
</div>
<div class="row">
<div ng-repeat="product in products" class="col-lg-3 col-md-6 col-xs-12">
<div class="container-fluid block-container">
<!--content-->
</div>
</div>
</div>
</div>
</div>
The issue arises from the row extending beyond the panel's width, aligning with the page width instead.
For a visual reference, please refer to this image: https://i.sstatic.net/WkqKg.jpg (I have outlined the .block-container with a border to highlight the problem)
I am confident that a simple fix exists, but so far, I have been unsuccessful in finding a solution. Any help would be greatly appreciated. Thank you!