issue with first element in nav bar having extra spacing - html

Question

My issue is that the first element in my nav bar which is "home" has more spacing than the rest of the elements. I can't seem for the life of me to figure out what it is. All I wanted was to have a centered evenly spaced out navigation bar but it's seeming harder than I thought.
CSS
.container {
width: 1060px;
background: #FFF;
padding: 50px;
margin: 0 auto;
}
#top_nav {
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
}
#top_nav ul {
list-style:none;
width:100%;
margin:0 auto;
padding:0;
text-align:center;
overflow:hidden;
}
#top_nav ul li {
margin:0 56px 0 0;
padding: 0;
font-size:1.7em;
text-transform:uppercase;
display: inline-block;
font-weight:bold;
}
#top_nav ul li a {
color:#fef6e9;
text-decoration:none;
display: block;
}
#top_nav ul li a:hover {
color:#ed7163;
text-decoration:none;
}
.content { padding: 10px 0;}
.content-outer { width:100%; overflow:visible; }
.content-outer .content-inner { width:100%; margin:0 auto; overflow:visible; position:relative; }
HTML
<div class="content-outer" id="top_nav">
<ul>
<li>Home<li>
<li>Digital</li>
<li>Film</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
</div>

Answer 1

That is because you are not properly closing the first li in your list.
<li>Home<li>
should be
<li>Home</li>
Consider running your code through a mark up validator like W3C mark up validator when you are having formatting problems. Many times its something small like a mismatched tag or not properly closing a tag such as in this case.