issues centering text in nav bar - html

Question

I'm having issues with centering the text in my navigation bar. I've tried everything I can think of. Any help would be greatly appreciated.
What I have here is my navigation bars html and css code. I have tried centering it and using other means but am still stuck.
hTML
<div class="content-outer" id="top_nav">
<div class="content-inner">
<ul>
<li>Home<li>
<li>Digital</li>
<li>Film</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
</div>
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 {
margin:0;
padding:0px 0;
list-style:none;
width:990px;
text-align: center;
overflow:hidden;
}
#top_nav ul li {
margin:0 56px 0 0;
padding:0;
font-size:1.7em;
text-transform:uppercase;
float:left;
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%; float:left; overflow:visible; }
.content-outer .content-inner { width:978px; margin:0 auto; overflow:visible; position:relative; }

Answer 1

Is this what you are looking for?
I removed the extra divs; created a nav element; put margin: 0 auto; on the ul; replaced the float: left on the li with display: inline-block; and there you have it!
HTML
<nav id="top_nav">
<ul>
<li>Home<li>
<li>Digital</li>
<li>Film</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</nav>
CSS
#top_nav {
position:fixed;
background:#343642;
font-family: Impact, Charcoal, sans-serif;
width: 100%;
}
#top_nav ul {
margin: 0 auto;
padding:0px 0;
list-style:none;
width:990px;
text-align: center;
}
#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;
}

Answer 2

Instead of giving just a margin-right for each li element like I can see in your code margin: 0 56px 0 0;, why you don't give equal margin left and right to each li tag?
For example: margin:0 34px 0 34px;
It could be a quick solution.
Check this DEMO:
http://jsfiddle.net/4n9hq/1/

Answer 3

Here is the answer in simplest form
<nav>
<ul>
<li>Home<li>
<li>Digital</li>
</ul>
</nav>
CSS
ul {
display: block;
text-align: center;
}
li {
display: inline-block;
}
In conclusion: set the "ul" tag to display:block and then center text