I needed to use flexbox to center my navigation and hence i came up with the following:
FIDDLE HERE
HTML:
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/48/EBay_logo.png" alt="Logo">
</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="consulting.html">CONSULTING</a></li>
<li><a href="devices.html">Medical Devices</a></li>
<li><a href="">Servises</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
.container
.container
.navbar-default > .container{
display: flex;
align-items:center;
justify-content:space-between;
}
space-between
flex-start
flex-end
flex-start
flex-end
space-between
space-between
The problem is a conflict with the Bootstrap stylesheet, which places pseudo-elements in your flex container. This causes space-between
to see multiple flex items as opposed to just two.
Here's your flex container:
Here's Bootstrap's ::before
and ::after
pseudo-elements (or pseudo-flex items):
Let's put some content in the pseudos:
Remove (or override) the pseudo-elements and your problem is gone:
More details about flex containers and pseudo-elements: