Centering the Navigation Bar and its Elements in HTML - html

Question

I am having problems creating a centred navigation bar where the child elements are also centred. I used nav-justified which almost works but then that seems to break the model so that when the window is smaller the collapsed menu stops working properly.
Html code is:
<header id="header">
<div class="container">
<!-- MOBILE MENU -->
<button id="mobileMenu" class="fa fa-bars" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"></button>
<!-- NAV MENU -->
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul id="onepageNav" class="nav nav-justified"><!-- id="onepageNav" for homepage only -->
<li class="active">How</li>
<li>Help</li>
<li>Support</li>
<li>Consultancy</li>
<li>Blog</li>
</ul>
</nav>
<!-- /NAV MENU -->
</div>
</header>
Not sure what css to include so will add whatever you need to see.
There are a few questions on this already out there but the answers don't seem to work for me.
Really very grateful for any help and explanations as I am quite new to this.
Thank you

Answer 1

If you want them to have space between them, you're dealing with a common problem. Here's a good resource: http://css-tricks.com/equidistant-objects-with-css/
However, if you just want them simply arranged centered
nav { text-align: center; }
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
background: pink;
padding: 1em;
}
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul id="onepageNav" class="nav nav-justified"><!-- id="onepageNav" for homepage only -->
<li class="active">How</li>
<li>Help</li>
<li>Support</li>
<li>Consultancy</li>
<li>Blog</li>
</ul>
</nav>