Align Navbar menu to the middle of the page - html

Question

I have a brand image in the center of the navbar and one menu on either side of it. I want to align both menus to the image (menu on the right side of the image is left aligned and vise versa). I managed this on the right menu but I can't align the menu on the left side.
What I have right now, looks good on large screens but does not condense properly on a smaller screen (on the left side, the right is correct).
CSS
.navbar{
background-color: white;
border: 0px;
height: 200px;
}
.navbar-middle {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.navbar-left {
padding-right: 10%;
padding-top: 90px;
width: 50%;
}
.navbar-right {
padding-left: 3%;
padding-top: 90px;
width: 50%;
}
.navbar-left li {
padding-left: 20%;
}
.navbar-right li {
padding-left: 15%;
}
HTML
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Our Vision</li>
<li>The Team</li>
</ul>
<ul class="nav navbar-middle">
<li><img src="200.jpg"></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Portfolio</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
Thanks for the help!

Answer 1

I think you are after something like this
ul{
list-style: none;
padding: 0;
}
.navbar{
background-color: white;
border: 0px;
height: 200px;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-end;
}
.navbar-left {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-end;
}
.navbar-middle {
margin: 0 20px;
}
.navbar-right {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
}
.navbar-left li {
margin-left: 20px;
white-space:nowrap;
}
.navbar-right li {
margin-right: 20px;
white-space:nowrap;
}
<div class="navbar">
<ul class="nav navbar-nav navbar-left">
<li><a class="pull-right" href="#">Home</a></li>
<li>Our Vision</li>
<li>The Team</li>
</ul>
<img class="nav navbar-middle" src="https://placehold.it/200x100/894567/ffffff?text=Logo">
<ul class="nav navbar-nav navbar-right">
<li>Portfolio</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>

Answer 2

From what I can see from inspecting the elements, your three ul seem to be overlapping.
So I changed the widths of the navbar-left and navbar-right classes to 45% each and added a width specification for the image, i.e. img src="200.jpg" size=10%.
From what I can tell, your left ul looked to be right-aligned not because of class="pull-right" but because of your .navbar-left li { padding-left: 20%; }. You can do the same for your navbar-right, i.e. .navbar-right li { padding-right: 20%; }.
This is the result: http://codepen.io/anon/pen/OMreKN. Not sure if it is what you're looking for.

Answer 3

Here's another option: JSFiddle
<div class="wrapper">
<ul class="nav navbar-nav navbar-left">
<li><a class="pull-right" href="#">Home</a></li>
<li>Our Vision</li>
<li>The Team</li>
</ul>
<ul class="nav navbar-middle">
<li><img src="200.jpg"></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Portfolio</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
body {
margin: 0;
}
.wrapper {
background-color: gray;
font-size: 0;
width: 100%;
height: 100px;
text-align: center;
}
img {
width: 100%;
}
.nav {
display: inline-block;
font-size: initial;
list-style: none;
padding: 0;
vertical-align: middle;
}
li {
display: inline-block;
width: 75px;
}
.navbar-left, .navbar-right {
width: 45%;
}
.navbar-middle {
width: 10%;
}