Text can't center in Bootstrap navbar-toggle-Twitter bootstrap

my text can’t be align center in the collapsable toggle. I think it’s because the text-align is align to the attritube… I tried many method, but still can;t seems to get it. Mind lend a help? Thanks!!

Using Twitter-Bootstrap 4.5.1

Code snippet:

html

<div class="container">
            <div class="nav-header">
                <div class="navbar-brand">
                    <a href="index.html">
                        <h1>Food LLC.</h1></a><hr>
                </div>

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false" aria-controls="navbar">
                <span class="material-icons">menu</span> 
                </button> 
                

             <div id="collapsable-nav" class="collapse navbar-collapse">
             <ul id="nav-list" class="nav navbar-nav navbar-right">
                <li class="visible-xs active">
                    <a href="index.html">
                        Home
                    </a>
        </li>
        <li>
          <a href="chicken.html">Chicken</a>
        </li>
        <li>
          <a href="#">Beef</a>
        </li>
        <li>
          <a href="#">Sushi</a>
        </li>
        
      </ul><!-- #nav-list -->
    </div>
        </div>

CSS

    button.navbar-toggle{
  position: absolute;
  right: 50px;
  top: 10px;
}
.navbar-nav {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
}

#nav-list{
  margin-top: 10px;
  margin-bottom: 10px;
  float: right;
  
}
#nav-list a {
  color: white;
  font-size: 1.3em;
  font-style: italic;
}
#nav-list li {
  margin-bottom: 5px;
}
#nav-list a:hover {
  text-decoration: none;
  color: #D3D3D3;
}