Центральная панель навигации с CSS

Я пытаюсь сосредоточить свой навигационный бар. Я проверил свои сайты, но ничего не работает, и я полностью зациклен на том, почему он не будет сосредоточен, вот мой HTML-код навигации, который я хочу сосредоточить:

<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='#'>PORTFOLIO</a>
   <ul>
     <li><a href='http://effectsforshare.blogspot.com/p/trailer.html'>TRAILER</a></li>
     <li><a href='http://effectsforshare.blogspot.com/p/motion-graphics.html'>MOTION GRAPHICS</a></li>
     <li><a href='http://effectsforshare.blogspot.com/p/trapcode-particular.html'>TRAPCODE PARTICULAR</a></li>

   </ul>
</li>
<li><a href='http://effectsforshare.blogspot.com/'>TEMPLATES</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/my-blog.html'>MY BLOG</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/contact-me.html'>CONTACT ME</a></li>


</ul>
</div>

и вот CSS

*{
  margin:0;
  padding:0;
  outline:0;
}
.nav {
  width:950px;
  height:auto;
  border-bottom:1px solid #eee;
  margin:10px auto 5px;
  display:inline-block;
}
.menu {
  width:auto;
  list-style:none;
  font:$pagenavifont;
  text-align:center;
  margin:0 auto;
}
.menu a {
  float:left;
  color:#999;
  text-decoration:none;
  text-transform:uppercase;
  width:auto;
  line-height:36px;
  padding:0 20px;
}
.menu a:hover,li.menuhover a{
  color:#111;
}
.menu li {
  position:relative;
  float:left;
  width:auto;
}
.menu li:last-child {
  background:none;
}
.menu ul{
  display:none;
  position:absolute;
  top:36px;
  left:0;
  background:#fbfbfb;
  display:none;
  list-style:none;
}
.menu ul li{
  float:none;
  border-top:1px solid #e3e3e3;
  border-right:1px solid #e3e3e3;
  border-left:1px solid #e3e3e3;
  width:auto;
  background:none;
}
.menu ul li:last-child {
  border-bottom:1px solid #e3e3e3
}
.menu ul li a{
  float:none;
  display:block;
  background:none;
  line-height:36px;
  min-width:137px;
  width:auto;
  text-align:left;
  padding-left:10px;
  color:#444;
}

.menu ul li a:hover{
  background:#fdfdfd;
  color:#777;
}

Я бы дал вам ссылку на страницу, но это делается в Dreamweaver и пока не в курсе. logobar.jpg является логотипом для веб-страницы. Мне нравится, как это выглядит, но оно должно быть сосредоточено, а не быть отрезанным или перенесенным на следующую строку, когда я сжимаю свои экраны.

Я пробовал каждый из float: right, float: left и float: none на почти всех классах; text-align: center для каждого класса на стороне html; Я попробовал align=center для каждого класса; display: inline, inline-block для классов ul и li.

Спасибо за помощь!