Bootstrap navbar-brand移动下面的链接

Question

我向导航栏品牌添加了一个图像并缩放到某个点，我遇到的问题是右边的链接向下移动了。品牌div下面。请帮帮我。

Work and About links are shifted down. Image is attached to this link.

我的代码如下所示：

<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"><a href="#">Work <span class="sr-only">(current)</span></a></li>
        <li><a href="#">About</a></li>        
      </ul>      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

同样的CSS是：

.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;
}

请帮我解决这个问题。