Submenus are not displayed correctly - css

Question

I would like to have the same result as this example.
For the sub-menus (portfolio, contact, etc...): a background that takes the whole width.
The titles of the submenus are almost centered
In my sidebar, I have two rubrics: Category and Markets.
Here is my example...
My problem is that the width of the submenus (Portfolio, Contact, Indice, etc..) are not wide.
There is white to the left.
I would also like to center the menu subtitles like the example I showed you.
I made an illustration of the menu here -> Stackblitz
Thank you a lot for your help and your time.
HTML
<div class="sidebar" [class.sidebar-close]="!openSidebar" >
<div class="logo-details">
<img src="https://zupimages.net/up/22/42/refj.png" />
</div>
<ul class="nav-links" id="nav-links" >
<li *ngFor="let item of menuSidebar" #itemEl routerLinkActive="active">
<div *ngIf="item.sub_menu.length == 0" class="dropdown-title">
<a [routerLink]="[item.link]">
<i [class]="item.icon"></i>
<span class="link_name">{{item.link_name}}</span>
</a>
</div>
<div *ngIf="item.sub_menu.length > 0" class="dropdown-title" (click)="showSubmenu(itemEl)">
<a>
<i [class]="item.icon"></i>
<span class="link_name">{{item.link_name}}</span>
</a>
<i class='bx bxs-chevron-down arrow'></i>
</div>
<ul class="sub-menu" [class.blank]="item.sub_menu.length == 0">
<li><a class="link_name">{{item.link_name}}</a></li>
<li *ngFor="let item_sub of item.sub_menu" routerLinkActive="active">
<a [routerLink]="[item_sub.link]">{{item_sub.link_name}}</a>
</li>
</ul>
</li>
</ul>
</div>
CSS
/* Sidebar */
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 260px;
background: white;
z-index: 100;
transition: all 0.5s ease;
}
.sidebar.sidebar-close {
width: 60px;
}
.sidebar .logo-details{
width: 100%;
padding: 10px 10px 10px 10px;
}
.sidebar .logo-details img{
height: 50px;
width: 80%;
display: block;
margin: 0 auto;
}
.sidebar.sidebar-close .logo-details img {
width: 37px;
height: 50px;
transform: scale(1.2) translateX(-3px);
}
.sidebar .nav-links {
height: 100%;
width: 260px;
padding-bottom: 150px;
overflow: auto;
}
.sidebar .nav-links::-webkit-scrollbar {
display: none;
}
.sidebar .nav-links li {
list-style: none;
}
.sidebar .nav-links > li {
position: relative;
width: fit-content;
}
.sidebar .nav-links li:hover {
background: #ffa726;
}
.sidebar .nav-links li.active {
background-image: linear-gradient(to right, #ffa726, #ff5722);
}
/* Dropdown Title */
.sidebar .nav-links .dropdown-title {
width: 260px;
overflow: hidden;
transition: all 0.52s ease;
/* */
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.sidebar.sidebar-close .nav-links .dropdown-title {
width: 60px;
}
.sidebar .nav-links li i {
height: 50px;
min-width: 60px;
text-align: center;
line-height: 50px;
color: #ffa726;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar .nav-links li:hover i,
.sidebar .nav-links li.active i {
color: white;
}
.sidebar .nav-links li.showMenu i.arrow {
transform: rotate(-180deg);
}
/* a Tag */
.sidebar .nav-links li a {
display: flex;
align-items: center;
text-decoration: none;
width: 100%;
}
/* Link Name */
.sidebar .nav-links li a .link_name {
font-size: 16px;
font-weight: 600;
color: #ffa726;
transition: all 0.4s ease;
}
.sidebar .nav-links li:hover a .link_name,
.sidebar .nav-links li.active a .link_name {
color: white;
}
.sidebar.sidebar-close .nav-links li a .link_name {
pointer-events: none;
}
/* Sub Menu */
.sidebar .nav-links li .sub-menu {
padding: 6px 6px 14px 70px;
/* margin-top: -10px; */
background: white;
display: none;
transition: all 0.4s ease;
}
.sidebar .nav-links li.showMenu .sub-menu {
display: block;
}
.sidebar .nav-links li .sub-menu a {
color: #ffa726;
font-size: 15px;
padding: 7px 0;
white-space: nowrap;
transition: all 0.3s ease;
}
.sidebar .nav-links li .sub-menu li {
padding-left: 10px;
}
.sidebar .nav-links li .sub-menu li:hover a,
.sidebar .nav-links li .sub-menu li.active a {
color: white;
}
.sidebar.sidebar-close .nav-links li .sub-menu {
position: absolute;
left: 100%;
top: -10px;
margin-top: 0;
padding: 0;
border-radius: 0 6px 6px 0;
opacity: 0;
display: block;
pointer-events: none;
transition: 0s;
overflow: hidden;
}
.sidebar.sidebar-close .nav-links li .sub-menu li {
padding: 6px 15px;
width: 200px;
}
.sidebar.sidebar-close .nav-links li:hover .sub-menu {
top: 0;
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
.sidebar .nav-links li .sub-menu .link_name {
display: none;
}
.sidebar.sidebar-close .nav-links li .sub-menu .link_name {
font-size: 16px;
font-weight: 600;
/* opacity: 1; */
display: block;
}
/* li:first-child contain .link_name */
.sidebar.sidebar-close .nav-links li .sub-menu li:first-child {
background: white;
pointer-events: none;
}
.sidebar.sidebar-close .nav-links li .sub-menu li:first-child:hover .link_name,
.sidebar.sidebar-close .nav-links li .sub-menu li:first-child.active .link_name {
color: #ffa726;
}
.sidebar .nav-links li .sub-menu.blank {
pointer-events: auto;
/* padding: 3px 20px 6px 16px; */
opacity: 0;
pointer-events: none;
}
.sidebar .nav-links li:hover .sub-menu.blank,
.sidebar .nav-links li.active .sub-menu.blank {
top: 50%;
transform: translateY(-50%);
}
.sidebar.sidebar-close ~ .home-section {
left: 60px;
width: calc(100% - 60px);
}

Answer 1

Your ul.sub_menu tag has a padding of 70px on the left.
At the moment you have this CSS affecting it:
.sidebar .nav-links li .sub-menu {
padding: 6px 6px 14px 70px;
background: white;
display: none;
transition: all 0.4s ease;
}
If you just add a different higher priority CSS declaration that tells it to have a different padding on the sub menu, it should work.
Here is what it looks like with a 15px padding on the left:
Also, I do see a CSS declaration that tells all ul tags to have a padding of 0. However, this is a lower priority than the mentioned code and gets overruled.

Answer 2

You have a 70px left padding value in the element .sidebar .nav-links li .sub-menu, which is your <ul> element. This is being generated by this shorthand line of code for the padding values:
padding: 6px 6px 14px 70px;
You need to remove this 70px value and then just tweak the padding-left value of .sidebar .nav-links li .sub-menu li which is currently set to 10px;