Q:

Cannot center my main navigation. Always stays on left. (CSS)

I cannot get my list items to center. Here is the code.
    <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-main-navigation-container">
              <ul id="menu-main-navigation" class="menu nav-menu">
                  <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-12"><a href="#">Home</a></li>
                  <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="#">Music</a></li>
                  <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="#">Video</a></li>
                  <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="#">Media Package</a></li>
                  </ul>
        </div>      
    </nav>

And here is the CSS file.
    .main-navigation {
    clear: both;
    width: 100%;
    text-align: center;
    margin: 0;
    }

   .main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    }

    .main-navigation li {
    float: left;
    position: relative;
    display: inline;
     }

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

If someone could also give a brief explanation of why the problem happened, that would be a great deal of help for helping me and others.    

A:

Since you already have text-align:center set on the parent (.main-navigation) simply add:
.menu-main-navigation-container {
    display: inline-block;
}

and change .main-navigation a from display:inline-block to display:block
.main-navigation a {
    display: block;
}

jsFiddle example - it's centered.
Alternatively, you could set a defined width on .main-navigation, and add margin:0px auto to center the ul.. This solution doesn't necessarily work well for dynamically generated content, as a hardcoded width is required, but nonetheless, both solutions would work in your situation.

