CSS centre a <ul> tag within div problems

Question

I am trying to center a UL tag inside a DIV and I am having some problems. I have tried many things. The code is attached below. The UL is a horizontal list.

<!-- Header -->
    <div id="header">
        <div class="container">

            <!-- Nav -->
                <nav id="nav">
                                            <ul>
                        <li <?php if($currenturl == 'index.php')  { ?>class="active"<?php } ?>><a href="index.php">Home</a></li>
                        <li <?php if($currenturl == 'limitededitions.php')  { ?>class="active"<?php } ?>><a href="limitededitions.php">Limited Editions</a></li>
                        <li <?php if($currenturl == 'left-sidebar.php')  { ?>class="active"<?php } ?>><a href="left-sidebar.php">Products</a></li>
                        <li <?php if($currenturl == 'services.php')  { ?>class="active"<?php } ?>><a href="services.php">Services</a></li>
                        <li <?php if($currenturl == 'suppliers.php')  { ?>class="active"<?php } ?>><a href="suppliers.php">Suppliers</a></li>
                        <li <?php if($currenturl == 'right-sidebar.php')  { ?>class="active"<?php } ?>><a href="right-sidebar.php">About</a></li>
                        <li <?php if($currenturl == 'no-sidebar.php')  { ?>class="active"<?php } ?>><a href="no-sidebar.php">Contact</a></li>
                        <li><a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_cart&amp;business=WEM898SE24RZL&amp;display=1">View Cart</a></li>
                    </ul>

                </nav>

        </div>
    </div>
<!-- Header -->


/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

#header
{
    position: relative;
    background: #FFF;
}

    #header .container
    {
        position: relative;
        padding: 3em 0em;
    }


/*********************************************************************************/
/* Nav                                                                           */
/*********************************************************************************/

#nav
{
    position: relative;
    top: 1em;
}

    #nav > ul > li
    {
        float: left;
    }

        #nav > ul > li:last-child
        {
            padding-right: 0;
        }

        #nav > ul > li > a,
        #nav > ul > li > span
        {
            display: block;
            padding: 0.80em 1.2em;
            letter-spacing: 0.06em;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 1.1em;
            outline: 0;
            color: #333;
        }

        #nav li.active a
        {
            background: #8B5A2B;
            border-radius: 5px;
            color: #FFF;
        }

        #nav > ul > li > ul
        {
            display: none;
        }

Any help will be greatly appreciated! Thanks.

Answer 1

I cant completely tell how you want to center this. Your float left wasn't helping though, is it 100% necessary? Regardless, here's a codepen to show you a way of doing it, not sure if it's the way you would like though.

I'm assuming it's a conventional navigation that needs to be centering in the middle of the page and inline.

http://codepen.io/anon/pen/qEQodo

changed CSS:

#nav {
    position: relative;
    top: 1em;
    text-align:center;
    margin:0 auto;
}

#nav > ul {
    margin:0 auto;
    text-align:center;
    position:relative;
    display:block;
}

#nav > ul > li {
    display:inline;
    list-style-type:none;
    margin:10px; 
}