Problema di allineamento <li>

[metatad]

Ho un problema di allineamento con CSS.
Questo è lo stile CSS:

ul#portfolio { float: left; list-style: none; margin-left: 480px; left:20%; width: 960px; }
ul#portfolio li { 
    float: left; 
    width: 160px;
}
ul#portfolio a { display: block; width: 160px; }
ul#portfolio a:hover { text-decoration: none; }
ul#portfolio img { display: block; } 

E questo è l'HTML:

<ul id="portfolio">
      <li class="bio">[url="#"][img]th_bio.jpg[/img]Bio&amp;Skills[/url]
      <li class="clients">[url="#"][img]th_clients.jpg[/img]Clients[/url]
      <li class="contact">[url="#"][img]images/cnn.png[/img]Contact[/url]
      <li class="web_design">[url="#"][img]th_alimenco.jpg[/img]Alimenco[/url]
.....[/list] 

Il problema è che, quale che sia il valore attribuito al width di ul#portfolio, le immagini contenute in ciascun [*] si dispongono con un allineamento scalettato a destra (vedi immagine allegata).
Da cosa dipende? E come posso risolvere?

[TheBestNeo]

ul#portfolio { float: left; list-style: none; margin-left: 480px; left:20%; width: 960px; }

Non capisco quel left:20%.
Se hai gia messo il margin left... E poi solitamente viene usato in accoppiata a una proprietà
position (absolute, relative)...

[metatad]

il tag <ul> sta dento un div contenitore, il posizionamento assoluto è dato da quello...
se metto solo left:20%; non me lo centra sulla pagina. Aggiungendo il margin-left con valore uguale alla metà del width, si...

[TheBestNeo]

E se lo togli quel left?
Sei in locale? Altrimenti linka il sito.

[metatad]

se tolgo il left, non cambia nulla;
per ora, sto lavorando in locale...

[TheBestNeo]

Prova con queste estensioni per Firefox:
Firebug
CssViewer

Ti permettono di vedere i blocchi, cosi puoi capire cosa non funge...

[metatad]

ok, proverò...
grazie