가운데에 네비게이션 바 (로고)가 붙어 있습니다.

Question

저는 제 첫 번째 Wordpress 테마 (예!)를 작업 중이며 PHP에 대해 많은 것을 배우고 있습니다. 그러나 탐색 표시 줄의 가운데에이 문장을 가운데에 놓으려고합니다. 작동하지 않습니다.

PHP :

<nav id="site-navigation" class="main-navigation" role="navigation"> 
     <h1 class="menu-toggle"><?php _e('Menu', 'my'); ?></h1> 
     <a class="skip-link screen-reader-text" href="#content"><?php _e('Skip to content', 'my'); ?></a> 

     <?php wp_nav_menu(array('theme_location' => 'primary')); ?> 
    </nav><!-- #site-navigation --> 

HTML

<nav id="site-navigation" class="main-navigation" role="navigation"> 
<h1 class="menu-toggle">Menu</h1> 
<a class="skip-link screen-reader-text" href="#content">Skip to content</a> 

<div class="menu-left-menu-container"><ul id="menu-left-menu" class="menu"><li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-4"><a href="http://">For Teachers</a></li> 
<li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-5"><a href="http://?page_id=2">For Parents</a></li> 
<li id="menu-item-15" class="mycrest menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a title="Go Home" href="#">My Crest</a></li> 
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="#">Recycle Your Devices</a></li> 
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="#">Our Team</a></li> 
</ul></div>  
</nav><!-- #site-navigation --> 
</header><!-- #masthead --> 

CSS :

.main-navigation ul { list-style: none; 
        margin: 0; 
        padding-left: 0; 
        text-align: center; } 
.main-navigation li { position: relative; 
        margin-right: 15px; 
        display: inline-block; 
        *display: inline; /*IE7*/ 
        *zoom: 1; /*IE7*/ } 
.main-navigation a { display: block; 
       text-decoration: none; } 
.main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
        display: none; 
        float: left; 
        left: 0; 
        position: absolute; 
        top: 1.5em; 
        z-index: 99999; } 
.main-navigation ul ul ul { left: 100%; 
         top: 0; } 
.main-navigation ul ul a { width: 200px } 
.main-navigation ul ul li { } 
.main-navigation li:hover > a { color: #00aeef } 
.main-navigation a:visited { color: #fff } 
.main-navigation ul li:hover > ul { display: block } 
.mycrest { 
background-image:url(assets/img/my_crest.png); 
background-repeat:no-repeat; 
width:199px; 
height:302px; 
font-size:0px; 
top:-130px; 
} 

#site-navigation { 
padding: 0px 15px 0px 15px; 
text-transform:uppercase; 
text-align:center; 
font-size:28px; 
color:#fff; 
font-family: 'Lato', sans-serif; 
height:40px; 
background-color:#602D90; 
border-top:1px solid #fff; 
} 

Answer 1

이 문장 리튬 항목으로 왼쪽 여백을 추가 margin-left: 96px; 기본적으로 우리가 진행 한 것은 이것이다 . 그러나 일단 모든 메뉴 항목이 창 너비에 맞지 않으면 이동하므로주의해야합니다.