Bootstrap Centering Content within a Div - html

Question

Basically I want my drop down boxes to be horizontally aligned in the center of the <div>. Currently they are in a column and inside a <div> which has displayed them vertically, by default and has pushed the content to the left of the <div>.
I'm using the latest version of bootstrap and only have CSS to pad the header and to set it as transparent!
<div class=" navbar transparent navbar-default navbar-fixed-top" role="navigation"> <!--HEADER-->
<div class="container-fluid header"> <!--CONTAINER- Needs to be inset slightly-->
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--First NavBar Colum - Logo is Located Here-->
<div class=" navbar-collapse collapse">
<div class="col-sm-4 ">
</div>
<!--Second NavBar Colum - Centered Horizontal Navigation Links are Located Here-->
<div class="col-sm-4 ">
<ul class="nav navbar-nav navbar-left">
<ul class="dropdown">
<i class="fa fa-circle-o"></i>
PLAY
<ul class="dropdown-menu">
<li class="divider"></li>
<li>Public Teatimes</li>
<li>Member Teatimes</li>
<li>Course Tour</li>
<li>Rates and Ratings</li>
<li>Outings</li>
</ul>
</ul>
<ul class="dropdown">
<i class="fa fa-circle-o"></i>
CLUB
<ul class="dropdown-menu">
<li class="divider"></li>
<li>Membership</li>
<li>Calender</li>
<li>Lessons and Shop</li>
<li>Bar and Food</li>
</ul>
</ul>
<ul>
<i class="fa fa-circle-o"></i>
CONTACT
</ul>
</ul>
</div>
<!--Third NavBar Colum - Social Media Icons are Located Here-->
<div class="col-sm-4">
<i class="fa fa-facebook-square fa-3x"></i>
<i class="fa fa-twitter-square fa-3x"></i>
<i class="fa fa-instagram fa-3x"></i>
</div>
</div> <!--/ .nav-collapse-->
</div>
</div>
</div>

Answer 1

In .navbar-nav, .navbar-left there is float:left . SO, you have remove that first float:none. Then on parent col-sm-4 you can add .text-center.

Answer 2

Try something like this
.navbar-nav{
width:250px;
margin:0 auto;
float:none;
text-align:center;
}
And remove float from <li> if you use.

Answer 3

#media (min-width: 768px)
.navbar-nav {
text-align: center;}