I have been struggling to align the content with the existing container above. The challenge arises as the container is positioned in a row, and I specifically wanted the file directory div on the left side, which naturally pushes the container to the right.
Applying a position: fixed; to the file directory div could solve the alignment issue, but it would compromise the responsiveness offered by Bootstrap's advanced system.
https://i.sstatic.net/QzTKR.png
The content appears misaligned in its current state.
Despite experimenting with various CSS solutions, none of them seemed satisfactory. Currently, I am trying to work around the issue using Bootstrap's column system for a somewhat acceptable outcome. Additionally, the provided image of the website reflects the result generated from this section of code.
<div class="container"><h2><i class="fas fa-archive" style="color: darkgoldenrod"></i> Archive Register({{ $files_total }})</h2></div>
<div class="container-fluid">
<div class="row justify-content-between">
<div class="file-list col-lg-2">
<h3 class="ml-5"><i class="fas fa-file-alt" style="color: darkgoldenrod"></i> File list:</h3>
<div class="file-list ml-5">
<p>List</p>
</div>
</div>
<div class="content col-lg-9">
content
</div>
</div>
</div>