Проблема с навигационной панелью CSS

Поэтому у меня возникает эта проблема, я пытаюсь создать простую навигационную панель, где LI

body {
        margin: 0px;
        font-family: Tahoma;
        font-size: 12pt;
    }
    a {
        color: #3D91EB;
        text-decoration:none
    }
    a:link {
        color: #3D91EB;
    }
    a:visited {
        color: #3D91EB;
    }
    a:active {
        color: #2C82DE;
    }
    .navigation {
        height: 30px;
        background-color: #383838;
        color: whiteSmoke;
        list-style-type:none;
        padding: 5px;
    }
    .navigation ul {
        text-align: center;
        width: 100%;
        list-style-type: none;
    }
    li {
        display: inline;
    }
    .container {
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        background-color: #9C9C9C;
        height: 500px;
        width: 600px;
        padding: 10px;
    }

и вот мой HTML

 <div class="navigation">
          <ul>
               <li>Test 1</li>
               <li>Test 2</li>
               <li>Test 3</li>
          </ul>
 </div>
 <div class="container" style="">
         Testasdf
 </div>

Если бы кто-нибудь мог помочь мне исправить мою проблему, это было бы здорово!