Hola estoy haciendo un diseño para una tablet en html5, le configuré un menú por lista flotante a la izquierda por medio de CSS, todo bien pero me coloca un espacio a la izquierda en el primer elemento bastante molesto le coloque clase al elemento de la lista y nada que puedo eliminar ese espacio a continuación el código y la imagen no la pude subir pero esta en este enlace http://www.4shared.com/photo/fhY684H4/menu_flotante.html
<style>
body
{
margin:0px;
}
#wrap {
position:absolute;
width:1024px;
height:600px;
background:url(assets/fondo.jpg);
margin:0 auto;
}
#sello {
Position:absolute
font-family:"tahoma", "verdana", arial, serif;color:#ed0b0b;
font-size:2.25em;
margin-top:50px;
margin-left:660px;
margin-right:110px;
text-align:center;
border:solid #ed0b0b 4px;
padding:5px;
border-radius:10px;
-webkit-box-shadow:4px 5px 6px #690303;
-webkit-transform:rotate(-15deg);
-webkit-transform:origin;
}
#mainnav {
margin-top:295px;
margin-left:0;
width:1024px;
}
mainnav ul{
float:left;
padding:0;
}
#mainnav li {
font-family:Verdana, Geneva, sans-serif;
float: left;
width: 160px;
height: 147px;
text-align: center;
border: 2px black dotted;
/*line-height: 55px;*/
list-style-position: inside;
list-style:none;
position: relative;
}
#mainnav ul li a {
color:#000000;
text-decoration:none;
display:block;
padding:10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="sello">
Viajando sin papel higienico
</div>
<div id="mainnav">
<ul>
<li class="nav-fotos"><a href="fotos.html"><img src="assets/camara.png" width="96" height="59" alt="fotos">Fotos</a></li>
<li><a class="nav-exoticas" href="exoticas.html">Comidas exoticas</a></li>
<li><a class="nav-consejos" href="consejos.html">Consejos</a></li>
<li><a class="nav-aerolineas" href="aerolineas.html">Aerolíneas</a></li>
<li><a class="nav-extremos" href="extremos.html">Extremos</a></li>
<li><a class="nav-huella" href="contact.html">Deja tu huella</a> </li>
</ul>
</div>