HTML + CSS Navigation issue

Question

I'm having a problem with aligning the navigation bar in the center. I've tried alot but nothing seems to work. There's also a fiddle below if anyone needs more information. thanks

<nav>
<ul class="navigation">
    <li><a href="index.html">Home</a></li>
    <li><a href="biography.html">Biography</a></li>
    <li><a href="media.html">Media</a>
      <ul>
          <li><a href="media.html">Pictures</a></li>
          <li><a href="media.html">Videos</a></li>
     </ul>
    </li>
    <li><a href="tour.html">Tour</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

nav {
    height: 100px;
    text-align:center;
    list-style: none;
    width: 1024px;

}
nav ul ul {
    display: none;
    padding: 0;
    position: absolute;
    top: 10%;


}

    nav ul li:hover > ul {
        display: block;

    }


nav ul {

    list-style: none;
    margin: 0px;
    padding: 0px;
    position: relative;

}
    nav ul:after {
        clear: both;
        content: "";  
        display: block;

    }

    nav ul li {
        float: left;
        width: 100px;

    }
        nav ul li:hover { ;

        }
            nav ul li:hover a {

            }

        nav ul li a {
            display: block; 
            padding: 25px 40px;
            text-decoration: none;
            width: 0;
        }


    nav ul ul {
        float: none;
         padding: 0;
        position: absolute; top: 50%;
    }
        nav ul ul li {
            float: none; 
             position: relative;


        }
            nav ul ul li a {
                padding: 15px 40px;


            }

http://jsfiddle.net/qpPww/

Any help will be appreciated, thanks.

Answer 1

Add this margin: 0 auto; css to your html body tag**

body {
    color: #001133;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 10px;
    margin: 0 auto;
}

Demo Fiddle

I hope this helps you!

Answer 2

try replacing your css with below

.navigation {width: 600px;height: 100px;}

nav ul {list-style: none;padding: 0px;position: relative;margin: auto auto !important;}