Getting ASP:Menu to center in the middle of the page

I'm having a difficult time finding a solution to my problem that relates to asp:Menu control and centering in a page. I'm really surprised all the solutions I search on Google are either not using asp:Menu control or just using lists or tables only.

I know margin:0 auto` and adding a width works but when I put it for the menu control I can't get it working.

This is my master page:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="PageWrapper">
                <header></header>
                <nav>
                    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false" DataSourceID="dsSiteMap" CssClass="MainMenu" />
                    <asp:SiteMapDataSource runat="server" ID="dsSiteMap" ShowStartingNode="false" />
                </nav>
                <section id="MainContent">
                    <asp:ContentPlaceHolder id="cpMainContent" runat="server"></asp:ContentPlaceHolder>
                </section>
                <footer></footer>
            </div>
        </form>
    </body>
</html>

CSS:

body
{
    margin: 0;
    background-color: gray;
}

#PageWrapper
{
    width: 1366px;
    background-color: white;
    margin: auto;
}

nav
{
    width: 1366px;
    height: 36px;
    background-color: seagreen;
}

nav a
{
    color: #fff;
}

.MainMenu
{
    border: 1px solid #999999;
    width: 1366px;
    height: 19px;
    background-color: #555555;
}

ul.level1
{ 
    display: block;
    width: 300px;
    text-align: center;
    margin: 0 auto;
}

Sitemap:

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/">
        <siteMapNode url="~/Default.aspx" title="Home"  description="Go to the homepage" />
        <siteMapNode url="~/NewTicket.aspx" title="New Ticket"  description="Create a new ticket" />
        <siteMapNode url="~/Search.aspx" title="Search" description="Search tickets" />
    </siteMapNode>
</siteMap>

Funny thing is when I create a label and place it in a placeholder, margin: 0 auto and width: auto works in centering.

Solution

Thank you everyone.

I finally was able to figure it out.

I edited the styling to my nav parent element:

nav{
clear: both;
text-align: center;
display: table;
margin: 0 auto;}

So instead of having it displayed as a block I set it as a table. Funny thing is it is still rendered as a list. I have it to clear because I have elements before it that was floated to the left. I definitely learned a lot more about CSS with this issue.

Kind of crazy for so much trouble just for one styling. Surprised