Позиция навигации в середине

Question

У меня возникли проблемы с правильной настройкой навигации в середине контейнера. Я подумал, что с поправкой на марж-левый и margin-right, установленный в auto, это поможет, но на некоторых экранах (и в браузерах это все еще не так, видимо, слишком далеко).

Также граница 1px под ней отлично выглядит на Chrome, но тоже много дополнений к Firefox.

Вот страница: http://www.mangdevelopment.co.uk/ghfurnishings/index.html

<section id="navigation"> 
<div class="container"> 
    <div class="row"> 
     <div id="navigation-container"> 
      <div class="span12"> 
      <!-- Start Navigation Bar --> 
       <nav class="nav"> 
        <ul> 
         <li class="bullet-point"><a href="index.html" class="active">HOME</a></li> 
         <li class="bullet-point"><a href="projects.html">PROJECTS</a></li> 
         <li class="bullet-point"><a href="#">CASE STUDIES</a></li> 
         <li class="bullet-point"><a href="profile.html">PROFILE</a></li> 
         <li class="bullet-point"><a href="#">NEWS &#38; EVENTS</a></li> 
         <li class="bullet-point"><a href="location.html">LOCATION</a></li> 
         <li class="bullet-point"><a href="contact.html">CONTACT</a></li> 
        </ul> 
       </nav> 
      <!-- End Navigation Bar --> 
      </div> 
     </div> 
    </div> <!-- End of row containing navigation --> 
</div> 

CSS

#navigation-container { 
border-top: 1px solid #9d9f96; 
border-bottom: 1px solid #9d9f96; 
padding-top: 10px; 
padding-bottom: 50px; 
} 

.nav { 
margin-bottom: 30px; 
} 

.nav a { 
color: #9d9f96; 
} 

.nav a.active { 
color: #636763; 
} 

.nav li { 
display: inline; 
list-style-type: none; 
padding-right: 15px; 
font-size: 1.1em; 
font-family: "Copperplate Gothic Light"; 
} 

.nav ul { 
width: 900px; 
} 

.nav ul li a { 
    text-decoration: none; 
} 

.nav ul li a:hover, ul li a:focus { 
    color: #636763; 
} 

.bullet-point { 
    margin-top: 0px; 
    margin-right: 0px; 
    list-style:none; 
    float:left; 
} 
.bullet-point:after { 
    content:" • "; 
    margin-left: 7px; 
} 
.bullet-point:last-child:after { 
    content: ""; 
    padding-right: 0px; 
} 

Answer 1

Попробуйте CSS. это будет нормально работать

.nav ul { 
    width:768px; 
    margin:0px auto; 
}