내 메뉴 표시 줄을 중앙으로 가져올 수 없습니다. (CSS)

Question

메뉴 표시 줄 자체는 중앙에 있지만 바 안의 단추는 없습니다. 그것을 고치는 방법에 대한 아이디어?

나는 정말로 내가하는 일을 모른다. 그래서 어떤 도움도 감사 할 만하다. D. 한 그것이 당신의 부모 요소이기 때문에 100 %이 또한

text-align: center; 

작동합니다 : 그 폭이 있기 때문에

.main-navigation { 
    clear:both; 
    display:block; 
    float:left; 
    width:100%; 
} 

nav.main-nav .container { 
    padding:0; 
    text-align:right; 
} 

.container { 
    margin-left:auto; 
    margin-right:auto; 
    padding-left:15px; 
    padding-right:15px; 
} 

ul#primary-menu li a { 
    color:#404040; 
    font-size:14px; 
    font-weight:100; 
    letter-spacing:2px; 
    margin-right:35px; 
    text-decoration:none; 
    text-transform:uppercase; 
} 

ul#primary-menu > li > a { 
    line-height:40px; 
} 

.main-navigation a { 
    display:block; 
    text-decoration:none; 
} 

Answer 1

메뉴 막대를 중앙에 배치하여 ".main 네비게이션",이를 사용해보십시오 당신의 UL이 퍼팅 시도

display: block; 
<!-- if its horizontal --> 
display: inline-block; 

body, html{ 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
.nav{ 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: black; 
 
    text-align: center; 
 
    
 
} 
 
.nav ul{ 
 
    margin: 0; 
 
    list-style-type: none; 
 
    
 
} 
 
.nav li{ 
 
    display: inline-block; 
 
    border: 1px solid white; 
 
    width: auto; 
 
    height: 20px; 
 
    margin-top: 10px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
} 
 
.nav a{ 
 
    text-decoration: none; 
 
    color: white; 
 
    transition: background-color 2s; 
 
    transition: color 2s; 
 
}

<div class="nav"> 
 
    <ul> 
 
     <li> 
 
      <a href="#">Home</a> 
 
     </li> 
 
     
 
     <li> 
 
      <a href="#">About Us</a> 
 
     </li> 
 
     
 
     <li> 
 
      <a href="#">Contact Us</a> 
 
     </li> 
 
    </ul> 
 
</div>