JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div id="main_navbar" class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
     
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Brands</a></li>
        <li><a href="#">Men's watches</a></li>
        <li><a href="#">Women's Watches</a></li>
        <li><a href="#">Watch Trade-in</a></li>
        <li><a href="#">Policies</a></li>
        <li><a href="#">Advanced Search</a></li>
        <li><a href="#">Sale</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

CSS

@media (min-width: 768px){
    .navbar-nav {margin: 0 auto; display: table; table-layout: fixed; float:none; width:100%;}
	.navbar-nav > li {display:table-cell; float:none; text-align:center;}
}

#main_navbar.navbar {border-radius:0; min-height:20px !important; margin-top:10px; border-top:1px solid #7a7a7a; border-bottom:1px solid #7a7a7a; border-right:none; border-left:none; background-color:#FFFFFF; font-weight:400; text-transform:uppercase;}
#main_navbar {min-height:20px;}
#main_navbar .navbar-nav > li > a {padding-top:6px !important; padding-bottom:0 !important; height: 28px;}
#main_navbar a {color:#000000;}
#main_navbar a:hover {color:#05699d;}
.navbar-toggle{background-color:#05699d !important;background-image:none;border:none;}