How to move the scrollbar position in a sidebar? - html

Question

I'm working on a costume admin dashboard for my SPA project. I have the following codes for sidebar section:
HTML:
<div class="sidebar">
<div class="logo_content">
<div class="logo">
<i class='bx bxl-c-plus-plus'></i>
<div class="logo_name">CodeX</div>
</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<div class="items-list">
<ul class="nav-list">
<li>
<a href="#">
<i class='bx bxs-grid-alt'></i>
<span class="links_name">Dashboard</span>
</a>
</li>
</ul>
<ul class="nav-list">
<li>
<a href="#">
<i class='bx bxs-user'></i>
<span class="links_name">User</span>
</a>
</li>
</ul>
.
.
<-- uls come here -->
.
.
.
</div>
</div>
CSS:
.sidebar .items-list{
height: calc(100% - 130px);
overflow-y: scroll;
overflow-x: hidden;
}
.sidebar ul{
margin-top: 20px;
}
.sidebar ul li{
position: relative;
height: 50px;
width: 100%;
margin: 0 5px;
list-style: none;
line-height: 50px;
}
.sidebar ul li a{
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
border-radius: 12px;
transition: all .4s ease;
}
.sidebar ul li a:hover{
color: #11101d;
background: #fff;
}
.sidebar ul li a i{
height: 50px;
min-width: 50px;
border-radius: 12px;
line-height: 50px;
text-align: center;
font-size: 30px;
}
The styled page is:
I want to move the scrollbar to the right edge of the sidebar. Currently, there is some gap between the sidbar edge and the scrollbar.
I have studied some related questions such as this and this, but I could not implement them in my own problem.
How can I do that?

Answer 1

I solved my own problem by modifying these styles:
.sidebar ul li a{
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
border-radius: 12px;
transition: all .4s ease;
margin-right: 12px;
}
.sidebar{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 240px;
background-color: #11101d;
padding: 6px 2px;
}