CSS: center all list elements except last one

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>

Solution

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>