html - Cannot identify strange space between links in horizontal menu -

html - Cannot identify strange space between links in horizontal menu -

i'm creating simple horizontal menu. when hover item changes background color, lefts unusual 3px space on left side of link, , cannot identify why shows up, , how remove it.

menu here: http://pokerzysta.site44.com/ (linki, posty, forum, dodaj) thought what's wrong it?

thats because you're displaying list in horizontal manner display: inline-block;. rendered there white spaces html markup (most line-breaks after li-tags).

if set li-tags in html without white-space , line-breaks won't happen:

<ul id="main-menu" class="horizontal-list fleft"> <li><a href="#">linki</a></li><li><a href="#">posty</a></li><li><a href="#">forum</a></li><li><a href="#">dodaj</a><li> </ul>

@cimmanon pointed great article chris coyier displaying list navigations horizontally: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

html css