I'm having an issue trying to position a div on the right side without causing content to overlap with the navbar. I've attempted using `position:absolute top:0 right:0`, but it's not working as intended.
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5878a8a919691978495a5d0cbd7cbd5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<nav class="navbar sticky-top navbar-expand-lg navbar-light" style="background-color: #025;">
<div class="container-fluid">
<a class="navbar-brand text-white" href="{% url 'users:home' %}" style="font-size: 25px; font-weight:600;">
<img src="{% static 'images/apple-icon.png' %}" class="d-inline-block align-text-center"
style="margin-left: 50px; height: 40px;">
Digi Dash
</a>
</div>
{% else %}
<a class="nav-link" href="{% url 'users:login' %}"><button type="button" class="btn btn-outline-primary text-white" style="border-radius: 10px;">Log In</button></a>
</div>
{% endif %}
</div>
</nav>
#side nav-bar
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2" id="side-nav" style="position:fixed">
<h4><img src="{{ user.profile.profile_pic.url }}" alt=""
style="max-width: 150px; max-height:150px; border-radius: 50%;"> <br>
<span> Hi <strong
style="color: #B9C04C; cursor:default;"> {{ user.username }}</strong></span>
<p></p></h4>
<!-- Navigation links in sidebar-->
<a class="text-center side-link text-white" href="#"><iconify-icon icon="material-symbols:dashboard"></iconify-icon> DashBoard</a><br />
<br />
<a class="text-center side-link text-white" href="#">My Order</a><br />
<br />
<a class="text-center side-link text-white" href=""><iconify-icon icon="solar:moon-fog-bold"></iconify-icon> Dark Mode</a><br />
<br />
<a class="text-center side-link text-white" href="#">My Address</a><br />
<br />
<hr>
</div>
<div class="col-10" style="position:sticky; right:0;">
<div class='col-sm-12' url-endpoint='{% url "users:api_data" %}'>
<div class='col-sm-5' style="float: left;">
<canvas id="myChart2" width="400" height="200"></canvas>
</div>
<div class='col-sm-5' style="float: left;">
<canvas id="myChart" width="400" height="200"></canvas>
</div>
<div class='col-sm-5' style="float: left;">
<canvas id="myChart3" width="400" height="200"></canvas>
</div>
</div>The goal is to have both the main navbar and side navbar fixed, while positioning a specific element on the right side. I'd like this element to scroll independently like on YouTube. Here's an image for reference: