Marginaler på länk med bakgrund

Hej,

har stora problem med min horisontella meny som ser ut på följande vis:

Hem Översigt Release

när man klickar på hem så dyker det upp en bakgrund bakom den, och den bakgrunden slutar preciiiss där varje bokstav börjar och slutar, så på hem börjar bakgrunden vid H't och slutar vid m'et, jag vill ha en liten marginal där på 2pixlar kanske, men vet inte hur jag ska göra detta, för då jag sättar margin på själva li klassen så skjuts länkarna vid mouseklick, vilket e helt galet för de skall ju vara fasta.

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li
{
float: left;
margin: 5px 0.15em;
}

#nav-menu li a
{
height: 0em;
line-height: 2em;
float: left;
clear: both; 
margin: 0px 20px 10px 1.18em;
/*border: 0.1em solid #dcdce9;*/
color: #CCC;
font-weight: bold;
text-decoration: none;
text-align: center;
}

#nav-menu .hem a:active
{
background: url(img/bg_hem.jpg) #fff bottom left repeat-x;
height: 45px;
line-height: 2em;
float: left;
width: 25px;
display:block;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
}

#nav-menu .oversikt a:active
{
background: url(img/bg_hem.jpg) #fff bottom left repeat-x;
height: 45px;
line-height: 2em;
float: left;
width: 58px;
display: block;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
}

#nav-menu .release a:active
{
background: url(img/bg_hem.jpg) #fff bottom left repeat-x;
height: 45px;
line-height: 2em;
float: left;
width: 94px;
display: block;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
}

<div id="nav-menu">
<ul>
<li class="hem"><a href="#">HEM</a></li>
<li class="oversikt"><a href="#">ÖVERSIKT</a></li>
<li class="release"><a href="#">RELEASE</a></li>
</ul>
</div>

Skulle va riktigt tacksam för hjälp