html - Centering Navbar Content -

can me center links on nav bar please. have been trying last 45 minutes.

every time use display: flex , justify-content: center works until hamburger button appears , clicked on , floats left.

any massively appreciated.

thank you

reece

.navbar {    background-color: #000;    justify-content: center;    height: auto;    font-family: gill sans, verdana;    font-size: 15px;    line-height: 18px;    text-transform: uppercase;    letter-spacing: 2px;    font-weight: bold;  }  nav li:hover {    background-color: #c00;    margin: 0;  }

<nav>    <div class="navbar-container">      <!--navbar container start -->      <nav class="navbar navbar-inverse navbar-fixed-top">        <div class="navbar-header">          <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle" data-target="#navbar" data-toggle="collapse" type="button">              <span class="icon-bar"></span>             <span class="icon-bar"></span>            <span class="icon-bar"></span>          </button>          <a class="navbar-brand" href="#"></a>          </div>          <div class="navbar-collapse collapse" id="navbar">          <ul class="nav navbar-nav">            <li class="active">              <a href="#header-container"><strong>home</strong></a>            </li>                <li>              <a href="#meettheband-container"><strong>meet band</strong></a>            </li>                <li>              <a href="#photo-container"><strong>photos</strong></a>            </li>                <li>              <a href="#video-container"><strong>videos</strong></a>            </li>                <li>              <a href="#getintouch-container"><strong>get in touch</strong></a>            </li>          </ul>        </div>      </div>    <!-- navbar container end -->    </nav>

check out pen http://codepen.io/danstan/pen/enajrb links @ center

ul.nav.navbar-nav { display: table; margin: 0 auto; float: none !important; 

}