0

I don't know why but if you run this code the left side of the nav bar is a bit bigger than the right can someone please tell me why? It doesn't look like I put any extra list items on the left. Thanks in advance. 

<!DOCTPYE html>
<html>
<head>
<style>
html {
    height: 100%;
    width: 100%;
    font: 25 calibri;
    text-align: center;
    background: linear-gradient(black,white);
}
#mainContent {
    margin: 0 auto;
    margin-top: -25px; 
    width: 800px;
    background-color: white;
    height: 1000px;
}
a:link, a:visited {
    text-decoration: none;
    color: grey;
}
a:hover {
    color: #ccc;
}
li {
    display: inline-block;
}
nav {
    margin: 0 auto;
    margin-top: 60px;
    width: 720px;
    background-color: brown;
    text-align: center;
}
</style>
</head>
<body>
    <nav>
        <ul>
            <li id="currentPage"><a href="index.html"><b>HOME</b></a></li>
            <li>|</li>
            <li><a href="updates.html">UPDATES</a></li>
            <li>|</li>
            <li><a href="tournaments.html">TOURNAMENTS</a></li>
            <li>|</li>
            <li><a href="recruitments.html">RECRUITMENTS</a></li>
            <li>|</li>
            <li><a href="contact.html">CONTACT</a></li>
        </ul>
    </nav>
    <div id="mainContent">
    </div>
</body>
</html>
kleinfreund
  • 6,546
  • 4
  • 30
  • 60
James Dorfman
  • 1,740
  • 6
  • 18
  • 36

1 Answers1

2

Use this style for your list

ul{
  padding:0;
  list-style-type:none;
}

Then check and let me know.

Exploring
  • 573
  • 2
  • 6
  • 19
  • 2
    The solution is correct. Now for the "why"-part: every `ul` has a default indent/padding so that the bullets will not end up outside the list itself. (See [Unordered List (
      ) default indent](http://stackoverflow.com/questions/4781014/unordered-list-ul-default-indent))
     – Marty McVry Dec 29 '13 at 18:05