Center Navigation Bar with crest (logo) in center

Question

I am working on my first Wordpress theme (yay!) and I'm learning a lot about php. However, I am trying to center this crest in the middle of the navigation bar and It's not working. Basically what we have going on is this:

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

Add the left margin to the crest li item: margin-left: 96px;. However, it will move once all the menu items can't fit the window width, so make sure you take care of that too.