Bootstrap navbar-brand shifts the links below - html

Question

I added an image to the navbar-brand and scaled to some point and the problem that i am having is that the links on the right get shifted down. Below the brand div. Help me with this please.
Work and About links are shifted down. Image is attached to this link.
My code is shown below:
<nav 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" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand text-center" href="#"><img src="img/logo.png" class="img-responsive" width="20%" height="100%"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Work <span class="sr-only">(current)</span></li>
<li>About</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
CSS for the same is:
.navbar-default {
height: 80px;
border-radius: 0;
border: 0;
border-bottom: 1px solid lightgray;
background: white;
}
.navbar-default .navbar-nav > li > a,
.navbar-brand {
padding-top: 0;
padding-bottom: 0;
line-height: 80px;
margin:0;
}
.navbar-form {
margin-top: 22px;
}
#media (max-width:768px) {
.navbar-default {
height: 50px;
}
.navbar-default .navbar-nav > li > a,.navbar-brand {
padding-top: 0;
padding-bottom: 0;
line-height: 50px;
}
#media (max-width:481px) {
.navbar-default {
height: 50px;
}
.navbar-default .navbar-nav > li > a,.navbar-brand {
padding-top: 0;
padding-bottom: 0;
line-height: 50px;
}
Please help me with the solution to this.