CSS – Centering inline list li within bootstrap 3 column

I’m trying to horizontally center inline list items within a bootstrap 3 col class but it keeps moving it to the left side of the column.

note – I should add that I left the “justify-content: center;” style in there cause that was the last thing I tried, but I do not necessarily want them justified (using up all the space of the column), but rather just centered within that div and extra space on the sides.

here it is on my test server http://gojibop.devlocation.site

`<div class=”hidden-xs hidden-sm col-md-6 “>
<ul class=”nav navbar-nav sticky-only text-center” style=”display: flex; justify-content: center;”>
<li><a href=”#RESTAURANT”>RESTAURANT</a></li>
<li><a href=”#MENU”>MENU</a></li>
<li><a href=”#LOCATION”>LOCATION</a></li>
<li><a href=”#INFO”>INFO</a></li>
</ul>
</div><!– close col –>`

Also in #CSS _↴