css - メニュー項目を背景画像の中央に配置

Question

このトピックに関する他の投稿を見て、何時間もの試行錯誤の末、質問をする時が来たと思うので、サイトの作成を続けます。

幅がブラウザーの 100% のヘッダーがあり、左上にロゴ、右にナビゲーション メニューがあり、メニュー項目が中央に配置されるテクスチャ背景画像があります。私は近くにいますが、最初のメニュー項目の左側にある余分な余白が気になり、背景画像内のすべての項目を中央に配置したいと思います (編集: 画像を投稿する権限がありません)

これが私のhtmlです：

<div class="header">

    <div id="logo" class="grid_4">
      <img src="img/mainlogo-box-texture.png" alt="Hibachi Hero">
    </div>

    <div class="grid_6 omega">
      <ul class="menu">
        <li><a href="index.html">home</a></li>
        <li><a href="menu.html">menu</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">contact</a></li>
      </ul>
    </div> 
</div>

そしてCSS：

.header { 
  width: 100%;
  height: 175px;
  background: #D35640;
}   

ul.menu {
  background: url('img/navtexture5.png') no-repeat;
  margin-top: 50px;
  list-style: none;
  float: right;
}

ul.menu li {
  float: left;
  text-transform: uppercase;
  letter-spacing: -1px;
  margin: 10px 30px 10px 5px;
}

ul.menu li a {
  color: #BABABA;
  font-size: 1.25em;
}

ul.menu li a:hover {
  color: #d35640;
  background: #efec69;
}

どんな洞察も本当に感謝します。ありがとう！