CSS Navigation bar issue [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 8 years ago.

Improve this question

So I am having this problem, I am trying to make a simple navigation bar where the 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;
    }

and here is my 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>

If anyone could please help me fix my issue, that would be great!

Answer 1

Check this one :-

FIDDLE

Update this :-

.navigation ul {
    text-align: center;
    width: 100%;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

Answer 2

Yeah it's because unordered lists automatically have CSS padding and margins on them. You have to clear them first:

ul {
  margin: 0px;
  padding: 0px;
}