html - Twitterブートストラップナビゲーションバーの画像を中央に配置する

Question

ここに私のライブサイトがあります: http://ancient-badlands-4040.herokuapp.com/

画像を中央に配置し、リンクを画像と垂直に揃えようとしています。

この投稿を読んだ後、これまでのところ、これについて多くの助けを得ましたTwitter Bootstrap - navbarのブランドロゴを中央に配置する

「ブランド」クラスを調整することで、以前に画像を中央に配置することに成功しました（幅を28％に設定しました）。残念ながら、「navbar」クラスの幅も調整する必要がありました。幅を調整すると、ロゴの位置が変わりました。

コードを以下のように変更しました。画像を中央に配置し、リンクを中央の画像と均等に並べようとしています。

どんな助けでも大歓迎です、ありがとう！:)

HTML: **更新された div と ul クラス

    <div class="navbar navbar-fixed-top">
  <div class="navbar-inner ">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li><a>CODEY</a>
          </li>
          <li> <a>CODEY</a></li>
        </ul>

        <ul class="nav pull-left">
          <li><a>CODEY</a></li>
          <li><a>CODEY</a></li>
          <li><a>CODEY</a></li>
          </ul>

          <a class="brand"></a>
          <%= image_tag 'ctclogonewnobg.png', alt: 'logo' %>

        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>

CSS:

$navbarLinkColor: #90fce8;
$navbarBackground: #ff3600;
$navbarBackgroundHighlight: #ff3600;
$navbarText: Archivo Black, sans-serif;
@import url(http://fonts.googleapis.com/css?family=Archivo+Black);


@import 'bootstrap';

body {

    background: url('escheresque_@2X.png');
}


@import 'bootstrap-responsive';

.navbar-inner {
    @include box-shadow(none !important);
    border: 0;
    width: 100%%;
    margin: auto;
}



.navbar .brand {
    margin-left: auto;
    margin-right: auto;
    width: 20px;
    float: none;

}