CSS: center all list elements except last one - css

Question

I'm trying to create a navbar which contains a title, some buttons and a username. I'm trying to align the buttons to the center and the username to the right, while the title stays to the left. Whatever I try, I can't get it to work. It either centers the buttons and the username, or it aligns it all to the left.
I have the feeling some conflicting styling is causing the problem, however I'm not sure and was wondering if someone could help me out.
.sidenav-container {
height: 100%;
}
.sidenav {
width: 200px;
}
.sidenav .mat-toolbar {
background: inherit;
}
.mat-toolbar.mat-primary {
position: sticky;
top: 0;
z-index: 1;
}
a {
text-decoration: none;
color: white;
}
a:hover,
a:active {
color: lightgray;
}
.icon {
display: inline-block;
height: 30px;
margin: 0 auto;
padding-right: 15px;
text-align: center;
vertical-align: middle;
width: 15%;
}
.label {
display: inline-block;
line-height: 30px;
margin: 0;
width: 85%;
}
#footer {
position:fixed;
left:0px;
bottom:0px;
height:40px;
width:100%;
background: white;
}
#menu
{
width: 100%;
margin: 0;
padding: 20px 0 0 0;
list-style: none;
display: inline-block;
}
#menu > li:last-child{
float: right;
}
<mat-sidenav-container>
<mat-sidenav #sidenav role="navigation">
<mat-nav-list>
<a mat-list-item [routerLink]="['post/list']">
<mat-icon class="icon">forum</mat-icon>
<span class="label">Posts</span>
</a>
<a mat-list-item [routerLink]="['news']">
<mat-icon class="icon">chrome_reader_mode</mat-icon>
<span class="label">News</span>
</a>
<a mat-list-item [routerLink]="['about']">
<mat-icon class="icon">dashboard</mat-icon>
<span class="label">About</span>
</a>
<a mat-list-item>
<mat-icon class="icon">output</mat-icon>
<button (click)="logout()">Logout</button>
</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<div fxHide.gt-xs>
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
</div>
<div>
<a [routerLink]="['']">
BRICKER
</a>
</div>
<div fxFlex fxHide.xs>
<ul fxLayout fxLayoutGap="20px" id="menu">
<a mat-list-item [routerLink]="['post/list']">
<mat-icon class="icon">forum</mat-icon>
<span class="label">Posts</span>
</a>
<li>
<a mat-list-item [routerLink]="['news']">
<mat-icon class="icon">chrome_reader_mode</mat-icon>
<span class="label">News</span>
</a>
</li>
<li>
<a [routerLink]="['about']">
<mat-icon class="icon">dashboard</mat-icon>
<span class="label">About</span>
</a>
</li>
<li>
<span *ngIf="(loggedInUser$ | async) as user" class="label"> <button mat-button [matMenuTriggerFor]="menu"
style="font-size:24px;">{{user}}</button>
<mat-menu #menu="matMenu">
<button mat-menu-item [routerLink]="['post/owned']">My Posts</button>
<button mat-menu-item (click)="logout()">Logout</button>
</mat-menu>
</span>
</li>
</ul>
</div>
</mat-toolbar>
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>

Answer 1

Are u expecting like this:
li:last-child {
color: lime;
background-color: black;
text-align:left; /*change this if you want to align right */
padding: 5px;
}
li{
text-align:center;
list-style:none;
}
<ol>
<li>one</li>
<li>two</li>
<li>Three</li>
</ol>
<ol>
<li>four</li>
<li>five</li>
<li>six</li>
</ol>