How do I center my navbar to be like the pic below. I’ve tried to set it as: display:flex but then it will have extra paddings on top of it which I don’t know how to get rid of.
Just ignore the white spaces cos I did not input the proper img links in it.
Here is the result I want to achieve:
add this to your css
here is a working example https://codepen.io/mlegg10/pen/oePYRY
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
Links Don’t seem to be working when I open the pen …and many images won’t load but it looks like you cleared up the extra stuff at the top. 
~Kevin
Yeah. I didn’t put the correct link for those images. that’s not the concern…
Does this link work?
.navbar-nav {
position:relative;
left:50px;
}
if this solves your problem
Just add this to your css and it will solve everything.
@media (min-width: 768px) {
.navbar-nav {
float: none;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
}
Problem may be platform related. I also run into issues with links when I check on Firefox and IE …less so with Chrome…I guess that’s just something we need to keep in mind when developing.
