Centering Navbar Content - html

Question

Can someone help me center the links on my nav bar please. I have been trying for the last 45 minutes.
Every time I use display: flex and justify-content: center it works until the hamburger button appears and is clicked on and then it all floats to the left.
Any help would be 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">
<strong>HOME</strong>
</li>
<li>
<strong>MEET THE BAND</strong>
</li>
<li>
<strong>PHOTOS</strong>
</li>
<li>
<strong>VIDEOS</strong>
</li>
<li>
<strong>GET IN TOUCH</strong>
</li>
</ul>
</div>
</div>
<!-- NAVBAR CONTAINER END -->
</nav>

Answer 1

Check out this pen http://codepen.io/Danstan/pen/ENajRb the links will be at the center
ul.nav.navbar-nav {
display: table;
margin: 0 auto;
float: none !important;
}

Answer 2

.navbar {
background-color: #000;
height: auto;
font-family: Gill Sans, Verdana;
font-size: 15px;
line-height: 18px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
text-align:center;
}
.navbar .navbar-header {
display:table;
width:auto;
margin:auto;
}
nav li:hover {
background-color: #C00;
margin: 0;
}

Answer 3

Try this:-
/* Center Nav Bar */
#nav ul {
text-align: center;
}
link:-http://themes.typepad.com/guide/2011/12/navbar-center.html