In my layout, I have three columns with a container in each column. However, I am experiencing an unusual display issue: https://i.sstatic.net/CLT1q.png
An example of the desired display is shown here:
https://i.sstatic.net/4dCru.png
The three columns in question are my navbar, my card grid, and a zoom feature on one card. I want both my navbar and zoom column to be fixed at the top so that only the grid scrolls when I scroll down. I successfully applied the "fixed-top" attribute to the navbar, but encountered layout issues when doing the same for the zoom column.
This is a snippet of my HTML body:
<body data-spy="scroll" data-target=".navbar .fixed-top" data-offset="50">
<div class="container-fill main_container">
<div class="row no-gutters">
<div class="col-sm-2 side_bar_n"> <!-- Navbar section -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion fixed-top" id="accordionSidebar">
........
</ul>
</div>
<div class="col-sm-7"> <!-- Card grid -->
<div class="container grid_container">
<h1>Card Search</h1>
<div class="row no-gutters">
<div class="col-sm-2"><img src="cards/287044.jpg" class="rounded grid_space img-fluid" alt="Cinque Terre"></div>
........
<div class="col-sm-2"><img src="cards/287044.jpg" class="rounded grid_space img-fluid" alt="Cinque Terre"></div>
</div>
</div>
</div>
<div class="col-sm-2"> <!-- Card display -->
<div class="container-fluid fixed-top">
<div class="card card_body">
<img class="card-img-top rounded" src="cards/368262.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Rythme of the Wild</h4>
<p class="card-text">Creature spells you control can't be countered.
NonToken creatures you control have riot (+1/+1 or haste when entering the battlefield.)</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>