Overlapping Text in List IE 8

Looking for some help with styling of text links in a list. Bascially the list looks perfect in Firefox, Chrome and IE9 but in IE8 wherever there is a space inside of the link (eg. "Illinois Open") the text seems to overlap. Once the link gets hovered on, the text reflows properly. I can "fix" it by using a non-breaking space in place of the actual spaces, but there has got to be a better fix. Dev site at ipgadev.ipcinc.net/foundation/index.asp.

List:
<nav id="subnav">
<ul>
<li class="first"><a href="/index.asp">Overview</a></li>
<li><a href="tournaments/2013/index.asp">Community Programs</a></li>
<li><a href="/illinoisopen/index.asp">Scholarships and Awards</a></li>
<li class="last"><a href="/foundation/index.asp">Illinois Golf Hall of Fame</a></li>
</ul>
</nav>

Styling navigation elements with:
#subnav ul { list-style:none; position:relative; margin: 0; padding: 0px; text-align:left; }
#subnav ul li { display: inline-block; position:relative; padding: 0; margin: 0; }
#subnav ul li a { display:inline-block; padding: 3px 8px 3px 8px; text-decoration: none; color: #686868; font-size: 1.0em; line-height: 24px; font-weight: normal; margin: 0 auto; overflow:hidden; border-right: 1px solid #ccc; }
#subnav ul li a:hover { color: #0082c8; }
#subnav ul li a.active { color: #b49956; }
#subnav ul li a.active:hover { color: #b49956; }
#subnav ul li.first a { border-left: 1px solid #ccc;;}

Any direction would be great. Thanks.

It appears adding auto to the margin in this line resolved it:

#subnav ul li { display: inline-block; position:relative; padding: 0; margin: 0 auto; }

Does this make sense to the CSS gurus?