Center the elements of a list in a navigation bar

I'm doing a navigation bar with Bootstrap, within the framework of Spring Boot, which sent them:

HTML

<header th:fragment="header">
    <nav class="navbar navbar-expand-lg navbar-dark">
        <a class="navbar-brand text-white">SILOCK</a>
        <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse">

            <ul class="navbar-nav">
                <li class="nav-item active pull-right"><a class="nav-link text-white">
                        <span class="fa fa-home"></span> Inicio
                </a></li>

                <li class="nav-item"><a class="nav-link" href="#about"
                    th:href="@{/}">Casillero</a></li>

                <li class="nav-item"><a class="nav-link" href="#about"
                    th:href="@{/}">Compartimiento</a></li>

                    <li class="nav-item"><a class="nav-link" href="#about"
                    th:href="@{/}">Compartimiento-Empleado</a></li>

                    <li class="nav-item"><a class="nav-link" href="#about"
                    th:href="@{/}">Empleado</a></li>    

                    <li class="nav-item"><a class="nav-link" href="#about"
                    th:href="@{/}">Departamento</a></li>

                    <li class="nav-item"><a class="nav-link" href="#about"
                    th:href="@{/}">Empresa</a></li>

                    <li class="nav-item"><a class="nav-link" href="#about"
                    th:href="@{/}">Usuario</a></li>

                    <li class="nav-item"><a class="nav-link" href="#about"
                    th:href="@{/}">Rol</a></li>

                    <li class="nav-item"><a class="nav-link" href="#about"
                    th:href="@{/}">Perfil</a></li>

                    <li class="nav-item active pull-right"><a class="nav-link text-white">
                        <span class="fa fa-user"></span> Sesion
                </a></li>

                    </ul>
        </div>

    </nav>
</header>

CSS:

  body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    left: 0;
    top: 0;
    position: fixed;
}

 .navbar-nav {
    width: 100%;
    text-align: center;
   background: #222222;
  }

  .navbar-nav > li {
      float: none;
      display: inline-block;
    }

.nav-item::after {
    content: '';
    display: block;
    width: 0px;
    height: 2px;
    background: #17a2b8;
    transition: 0.2s;
}

.nav-item:hover::after {
    width: 100%;
}

.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active,
    .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link,
    .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover
    {
    color: white;
}

.nav-link {
    padding: 5px 15px;
    transition: 0.2s;
}

Now, I come to ask you that in my navigation bar I want to have <li>inicio</li> in the left corner, <li>Sesión</li> in the right corner and <li>Casillero</li> , <li>Compartimiento</li> , <li>Compartimiento-Empleado</li> , <li>Empleado</li> , <li>Departamento</li> , <li>Empresa</li> , <li>Usuario</li> , <li>Rol</li> and < li>Perfil</li> centered. Thank you very much.