Witam Was Drodzy Użytkownicy.

Otóż mam pewien problem. Z początku powiem, że w zakresie HTMLa i CSS jestem początkujący i się dopiero uczę. Chodzi mi o to, że nie mogę wyśrodkować menu poziomego w CSS. Próbowałem kilku różnych sposobów, np. margin-left auto margin-right: auto, lub innych które użytkownicy podawali. Niestety nie wiem gdzie szukać błędu, bo jak już wspomniałem jestem początkujący. Menu to przerabiałem samodzielnie, ale surową wersję miałem z HTML dla zielonych o ile dobrze pamiętam. Wrzucam kod CSS i HTML:
Będę wdzięczny za wszelką pomoc.
Dodatkowo chciałbym, abyście dali mi pewne sugestie co do estetyki strony, gdyż niestety nie do końca się na tym znam. Za ewentualne poprawki będę wielce wdzięczny smile.gif Pozdrawiam.
CSS:
Kod
body
    {
      background-image: url(Hobbit1.jpg);
    background-attachment: fixed;
    }

#logo /* Logo */
    {
    background-repeat:no-repeat;
    color: black;
    width: 100%;
    padding: 10px;
    }


#tlo /* Tlo Tekstu*/
    {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    filter: alpha(opacity=10);
    
    position: relative;
    top: 0px;
    margin-left: auto;
    margin-right: auto;
    height: 1000px;
    width: 80%;
    border-radius: 10px;
    }

#menu li {
    text-align: center;
    
    list-style: none;
    margin: 30;
    padding: 1px;
}

#menu li {
    float: left;
    font-weight: bold;
    

    
}

#menu a:link, ul a:visited {
    text-decoration: none;
    
    width: 50px;
    text-align: center;
    background-color: #0066CC;
    color: orange;
    border: 2px outset #0066CC;
    padding: 12px 25px 8px 25px;
    box-shadow: 3px 3px 3px;
}

#menu a:hover {
    border-style: inset;
    padding: 12px 25px 8px 25px;
    
    border-style: inset;
    color: red;
    background-color: black;
    border-color: #FF9900;
    /* Firefox */
    -moz-transition: all 0.4s ease-in;
    /* WebKit */
    -webkit-transition: all 0.4s ease-in;
    /* Opera */
    -o-transition: all 0.4s ease-in;
    /* Standard */
    transition: all 0.4s ease-in;
}
    

}
#menu{margin-left: auto;
    margin-right: auto;
    width: 1000px;
    margin-top: 30px;
    margin-bottom: 20px;
}

a    {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 5px;
    background: grey;
    }


[HTML] pobierz, plaintext 
  1. <html>
  2.  
  3. <head>
  4.  
  5. 	<meta http-equiv="Content Language" content="pl" />
  6. 	<title> Hobbit </title>
  7. 	<link rel="stylesheet" type="text/css" href="style.css" />
  8.  
  9. </head>
  10.  
  11. <body>
  12.  
  13.  
  14.  
  15.  
  16.  
  17.  
  18. <div id="logo">
  19. <center><img src="banner.png"></center>
  20. </div>
  21. <div id="menu">
  22. 	<li> <a href="#"> STRONA GŁÓWNA </a></li>
  23. 	<li> <a href="#"> OPIS </a></li>
  24. 	<li> <a href="#"> REŻYSER </a></li>
  25. 	<li> <a href="#"> AKTORZY </a></li>
  26. 	<li> <a href="#"> GALERIA </a></li>
  27. 	<li> <a href="#"> SOUNDTRACK </a></li>
  28.  
  29. </div>
  30. <div id="tlo">	
  31.  
  32. <div id="opis">
  33. </div>
  34. </div>
  35.  
  36.  
  37. </body>
  38.  
  39. </html>
[HTML] pobierz, plaintext