CSS центрираща вградена навигация

Имам проблем с центрирането на навигационно меню, което създадох за моя клас, опитах всички текстови подравнявания, margin-left/margin-rgiht, центриране в html и т.н. Всеки сайт, който намеря, ми казва margin-left:auto; и margin-right:auto; но това не работи. Ето менюто, което трябва да центрирам автоматично в страницата.

    <div class="menu">
<ul>
    <li><a href="/bgindex.html">Home</a></li>
    <li><a href="/bgartwork.html">Artwork</a>
        <ul>
            <li><a href="/bg#">Pencil</a></li>
            <li><a href="/bg#">Pastel</a></li>
            <li><a href="/bg#">Color Pencil</a></li>
            <li><a href="/bg#">Charcoal</a></li>
            <li><a href="/bg#">Digital</a></li>
        </ul>
    </li>
    <li><a href="/bg#">Projects</a>
        <ul>
            <li><a href="/bg#">74 Duster</a></li>
            <li><a href="/bg#">The "Beast"</a></li>
            <li><a href="/bg#">Darkness and Hope</a></li>
        </ul>
    </li>
    <li><a href="/bg#">About</a>
        <ul>
            <li><a href="/bg#">Who I am and why it matters</a></li>
            <li><a href="/bg#">Contact Me</a></li>
        </ul>
    </li>
</ul>
</div>

И ето CSS за него:

.menu {
margin-right:auto;
margin-left:auto;
max-width:700px;
display:inline-block;
padding:0px;
font-size:14px;
font-weight:bold;
text-align:center;
}

.menu ul {
width:700px;
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
text-align:center;
}

.menu li {
width:175px;
text-align:center;
float:left;
padding:0px;
}

.menu li a {
background:#333333;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a {
background: #2580a2;
color:#FFFFFF;
text-decoration:none;
}

.menu li ul {
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:175px;
z-index:200;
}

.menu li:hover ul {
display:block;

}

.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:175px;
}

.menu li:hover li a {
background:none;
}

.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a {
background:#2580a2;
border:0px;
color:#FFFFFF;
text-decoration:none;
}

Всяка помощ ще бъде много оценена или ако знаете начин да центрирате цялата уеб страница и да мащабирате съдържанието до разделителната способност на зрителите, това би било чудесно.