Центр навигации Бар с гребнем (логотип) в центре

Question

Я работаю над своей первой темой Wordpress (yay!), И я многому учусь о 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

Добавьте левый край к пункту гребень Li: margin-left: 96px; , Тем не менее, он будет перемещаться, как только все пункты меню не смогут соответствовать ширине окна, поэтому убедитесь, что вы тоже позаботились об этом.