the border-bottom is not displayed completely - css

Question

I don't understand why the border-bottom is not displayed entirely in the menu?
Here is my result below:
image
In this image, there is a space on the left that I would like to remove because it is not aesthetically pretty.
dashboard.component.html
<div class="sidebar" style="border-right: 1px solid black" [ngClass]="{ active: showSideBar }">
<div class="logo-details" style="border-bottom: 1px solid black;">
<span class="logo_name">
</span>
</div>
<ul id="accordion" class="accordion">
<li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
<ng-container>
<div class="menu" (click)="selectMenu(menu)">
<i [class]="menu.iconClass"></i> {{ menu.name }}
<i class="fa fa-chevron-down"></i>
</div>
</ng-container>
</li>
</ul>
style.css
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
font-size: 58px;
}
h2 {
font-size: 30px;
}
ul {
list-style-type: none;
}
.sidebar {
position: fixed;
height: 100%;
width: 250px;
background: #239cd3;
/* overflow-y:scroll;*/
transition: all 0.5s ease;
}
/* LOGO */
.sidebar .logo-details {
height: 100px;
display: flex;
align-items: center;
}
/* ACCORDION */
.sidebar .accordion {
width: 100%;
margin: 0px;
border-radius: 4px;
}
/* MENU TITLE */
.sidebar .accordion .menu {
position: relative;
padding: 15px 15px 15px 20px;
color: white;
border-bottom: 1px solid #ccc;
cursor: pointer;
transition: all 0.4s ease;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
}
/* ICON MENU TITLE */
.sidebar .accordion li i {
position: absolute;
top: 1.2rem;
left: -15px;
/* left: 1rem; */
color: white;
transition: all 0.4s ease;
font-size: 18px;
}
.sidebar .accordion li i.fa-chevron-down {
right: 1rem;
left: auto;
}
.sidebar .accordion li.active i.fa-chevron-down {
transform: rotate(180deg);
}
The code is here for information -> Stackblitz.
Thank you in advance for your reply.

Answer 1

There is a padding-left: 2rem; for ul element. Remove that.
Give that padding-left: 2rem; to the li element in *ngFor.
remove border-bottom from div and add to li.