My Bootstrap Navbar list is not coming to the center - html

Question

I'm trying to center my menu list items in the bootstrap navbar. I've tried with the many CSS styles but it is still in the left.Below is my html and css please correct me if I'm wrong with the css.[To be more specific what I want is I want those menu items right below the Logo.][1]
<div class="header-botom">
<div class="content white">
<nav class="navbar navbar-default nav-menu" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="clearfix"></div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse collapse-pdng" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-font">
<li>Home</li>
<li>Ear Rings</li>
<li>Jewelry </li>
<li>Accessories</li>
</ul>
<div class="clearfix"></div>
</div>
<!--/.navbar-collapse-->
<div class="clearfix"></div>
</nav>
<div class="clearfix"></div>
</div
>
</div>
.nav-menu{
background: transparent;
border-radius: 0;
border: 0;
margin-top: 6px;
}
.navbar .{
text-align:center;
}
.navbar-nav li{
float: none;
display: inline-block;
}
[1]: https://i.stack.imgur.com/wxHSz.png

Answer 1

What you looking for is to add these css properties.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
Possible Duplicate of this question.
JS Bin here

Answer 2

Add the following class in your custom css:
.navbar-nav {
text-align: center;
}
Demo:
.nav-menu {
background: transparent;
border-radius: 0;
border: 0;
margin-top: 6px;
}
.navbar . {
text-align: center;
}
.navbar-nav li {
float: none;
display: inline-block;
}
.navbar-nav {
text-align: center;
background: #e4e4e4;
}
<div class="header-botom">
<div class="content white">
<nav class="navbar navbar-default nav-menu" role="navigation">
<div class="collapse navbar-collapse collapse-pdng" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-font">
<li>Home</li>
<li>Ear Rings</li>
<li>Jewelry </li>
<li>Accessories</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</nav>
<div class="clearfix"></div>
</div>
</div>

Answer 3

yes its seems like i got the solution for your problem, if you are using bootstrap
add the class into your custom css file
.collapse-pdng { padding: 0px 0px; margin: 0 auto; width: 32%; }
add the following class in your html file
<div class="text-center">
<div class="collapse navbar-collapse collapse-pdng" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-font">
<li>Home</li>
<li>Ear Rings</li>
<li>Jewelry </li>
<li>Accessories</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
add the class text-center in div and put your whole menu in that class, i hope this will help you, please let me know