탐색 모음의 형식 수정

Question

홈 버튼 왼쪽과 제안 버튼 오른쪽의 간격은 어떻게 결정됩니까? 나는 거기에서 그것을 원하지 않는다. 그러나 나는 확실하지 않다.

<div class="container"> 
    <ul class="nav"> 
    <li class="nav-home"> 
     <a href="index.html">Home</a> 
    </li> 
    <li class="nav-games"> 
     <a href="games.html">Games</a> 
    </li> 
    <li class="nav-chat"> 
     <a href="chat.html">Chat</a> 
    </li> 
    <li class="nav-suggestions"> 
     <a href="suggestions.html">Suggestions</a> 
    </li> 
    </ul> 
</div> 

.nav { 
width: 900; 
clear: right; 
height: 55px; 
margin-left: 25px; 
margin-right: 25px; 
z-index: 5; 
overflow: visible; 
background: #161616; 
background: -moz-linear-gradient(top, #161616 0%, #282828 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#161616), color-stop(100%,#282828)); 
background: -webkit-linear-gradient(top, #161616 0%,#282828 100%); 
background: -o-linear-gradient(top, #161616 0%,#282828 100%); 
background: -ms-linear-gradient(top, #161616 0%,#282828 100%); 
background: linear-gradient(to bottom, #161616 0%,#282828 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#161616', endColorstr='#282828',GradientType=0); 
border: 1px solid #090909; 
box-shadow: inset 0px 0px 1px rgba(255,255,255,.2), 0px 3px 5px rgba(0,0,0,.5); 
} 

.nav li { 
list-style-type: none; 
float: left; 
display: inline-block; 
padding: 0px 80px; 
padding: 0px 80px\9; 
width: 55; 
text-align: center; 
height: 55px; 
border-right: 1px solid #090909; 
box-shadow: 1px 0px 0px rgba(255,255,255,.1); 
-webkit-transition:all 0.2s linear; 
-moz-transition:all 0.2inear; 
-o-transition:all 1s linear; 
transition:all 0.2s linear; 
} 

.nav li.logo:hover { opacity: 1; background-color: transparent;} 

.nav li:last-child { border: none; box-shadow: none; } 

.nav li a, nav ul li a:visited { 
line-height: 55px; 
text-decoration: none; 
color: #9c9c9c; 
font-size: 15px; 
font-family: "Droid Sans", Arial, sans-serif; 
text-transform: uppercase; 
text-shadow: 0px 1px 0px rgba(0,0,0,.9); 
-webkit-transition:all 0.2s linear; 
-moz-transition:all 0.2s linear; 
-o-transition:all 0.2s linear; 
transition:all 0.2s linear;  
} 

.nav li:hover { 
background-color: rgba(0,0,0,.2); 
background-color: #191919\9; 
-webkit-transition:all 0.2s linear; 
-moz-transition:all 0.2s linear; 
-o-transition:all 0.2s linear; 
transition:all 0.2s linear; 
color: white; 
} 

.nav li:hover a { color: white; 
-webkit-transition:all 0.2s linear; 
-moz-transition:all 0.2s linear; 
-o-transition:all 0.2s linear; 
transition:all 0.2s linear; 
} 

#nav-home .nav li.nav-home, #nav-home .nav li.nav-home:hover, #nav-home .nav li.nav-home, 
#nav-games .nav li.nav-games, #nav-games .nav li.nav-games:hover, #nav-games .nav li.nav-games, 
#nav-chat .nav li.nav-chat, #nav-chat .nav li.nav-chat:hover, #nav-chat .nav li.nav-chat, 
#nav-comments .nav li.nav-comments, #nav-comments .nav li.nav-comments:hover, #nav-comments .nav li.nav-comments { 
background: url(../img/tools/pattern.png) top center repeat; 
box-shadow: inset 0px 0px 1px rgba(255,255,255,0.5); 
} 

#nav-home .nav li.nav-home a, #nav-games .nav li.nav-games a, #nav-chat .nav li.nav-chat a, 
#nav-comments .nav li.nav-comments a { color: white; } 

여기 그래서 당신은 내가 시각적으로 무엇을 의미하는지 볼 수 jsfiddle http://jsfiddle.net/DAcgr/입니다. 더 이상의 정보가 필요하다면 downvoting하기 전에 물어보십시오. 감사합니다

Answer 1

목록 요소에는 기본적으로 패딩이 있습니다. padding:0을 추가하여 제거하십시오. 당신이 도움을 위해 왼쪽의 ul의

Answer 2

기본 패딩

수정

ul{ 
    padding:0; 
    margin:0; 
}