odsadenie menu css

Sewa, som zaciatocnik
robim jedno horizontalne menu a chcem ho prisposobit pre jeden obrazok co je v pozadi na stranke, a potrebujem vediet ako mu definujem odsadenie medzi slovami. napr. 1. HOME ABOUT PROJECTS
2. HOME ABOUT PROJECTS
potrebujem konkretnu dlzku aby to na obrazok v pozadi pekne sadlo.
ktore funkcie mam zmenit alebo ake mi tam chybaju(#menu li) aby boli co najtesnejsie pri sebe?

<div id="menu">
<ul>
<li><a href="#HOME">HOME</a></li>
<li><a href="#ABOUT">ABOUT</a></li>
<li><a href="#PROJECTS">PROJECTS</a></li>
<li><a href="#SERVICES">SERVICES</a></li>
<li><a href="#CONTACTS">CONTACTS</a></li>
</ul>
</div>

CSS

#menu ul {
list-style-type: none;
margin-top: -40px;
margin-left: 145px;
padding-left: 10px;
height: 1.5em;
}

#menu li {
display:list-item;
padding-left: 20px;
margin-right: 30px;
float: left;
width: -30em;
margin-right: 0.5em;
margin-left:42px;
}

#menu a {
color: #ffffff;
text-decoration: none;
font-size: 11px;
padding: -30px;
text-indent: -15px;
border-spacing: 5px;