背景图像中的中心菜单项

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

非常感谢任何见解。谢谢！