Why is content inside 2nd column overlapping first column instead of being compressed inside 2nd column?

Question

I am using Bootstrap 5 inside Angular 16. With my current code, when the screen reaches below xl (below 1200px), I have my "Filter" accordion become a "Filter" tab.

The issue I'm having is my second column stops compressing the information inside it around 1310px and starts overlapping the first column around 1240px. This happens until the screen's width is below 1200px, where then the accordion becomes a tab and the first column only takes up col-1 (it was col-2 on xl screens). I am not exactly sure why this is happening. Here is my code:

inventory-page.component.html:

<div class="container-fluid mt-5">
    <div class="row">

        <!-- Column 1, Filter Column-->
        <div class="col-xl-2 col-lg-1 col-1 p-0 m-0 justify-content-start">
            <app-inventory-filter class = "filter"></app-inventory-filter>
            <div class = "filter-tab d-flex justify-content-center border border-dark border-2 py-2">Filter</div>
        </div>

        <!-- Column 2, Book List Column-->
        <div class="col-xl-4 col-lg-5 col-11 d-flex justify-content-lg-end justify-content-center bg-primary">
            <app-inventory-book-list class></app-inventory-book-list>
        </div>

        <!-- Column 3, Book Details Column-->
        <div class="col-xl-6 col-lg-6 d-none d-lg-block d-flex justify-content-start bg-secondary" style = "height: 100dvh;">
            <div class = "position-fixed mx-auto">
                <app-inventory-book-details></app-inventory-book-details>
            </div>
        </div>

    </div>
</div>

inventory-page.component.css:

.filter {
   display: none !important; /* Logic not implemented yet to hide the accordion and display tab so I just hide it when testing responsiveness with tab */
} 

.filter-tab {
    background-color: #ff6b6b;
    border-left: none !important;
    cursor: pointer;
} 

.filter-tab:hover {
    background-color: #cc5959;
}

inventory-book-list.component.html:

<div class = "book-block container-lg" *ngFor = "let book of bookList">
    <p class = "title pt-2 mb-0 fs-3">{{ book.title }}</p>
    <p class = "author m-0">Author: {{ book.author }}</p>
    <p class = "genre">Genre: {{ book.genre }}</p>
    <p class = "description"> {{ book.description }}</p>
    <p class = "pages m-0">Pages: {{ book.pages }}</p>
    <p class = "availability pb-3">Availability: {{ book.availability }} <br></p>
</div>

<!-- THE CULPRIT -->
<!-- Placeholder until I can dynamically create pages -->
<nav aria-label="Page navigation example">
    <ul class="pagination d-flex justify-content-center">
      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">6</a></li>
      <li class="page-item"><a class="page-link" href="#">7</a></li>
      <li class="page-item"><a class="page-link" href="#">8</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
  </nav>
<!-- THE CULPRIT -->

inventory-book-list.component.css:

.book-block {
    max-width: 500px;
    box-sizing: border-box;
}

.book-block:hover {
    background-color: #d9d9d9;
    /* border-left: 3px solid #ff6b6b; */
}

Picture of 1200px screen where information in column 2 overlaps column 1

Picture of 1199px where it's below xl so the screen responded accordingly by shrinking column 1 to col-1 and making the Filter a tab

[EDIT: Here was the culprit. It was out of view so it didn't cross my mind and I didn't physically see it restricting the content from compressing more] (https://i.stack.imgur.com/tbi9d.png)