<div id="main_wrapper">
<nav id="nav">
                <ul>
                    <li><a href="blabla.html">LIEN1</a></li>
                    <li><a href="bloblo.html">LIEN2</a></li>
                    <li><a href="http://www.blublu.fr/">LIEN3</a></li>
                    <li><a href="blibli.html">LIEN4</a></li>                    
                </ul>
            </nav>

<!--suite du code-->
</div>

nav
{	
    display: inline-block;    
    font-size: 2em; 
    width: 110%;  
    border-radius: 10px; 
    text-align: justify; 
}

nav ul
{
    list-style-type: none; 
    margin: 0px 0px; 
    padding: 0px;
}

nav li
{
    display: inline-block; 
}

nav ul li
{    
    border-top: 2px white solid;
    border-bottom: 2px white solid;
    margin-right: 85px;        
}

#main_wrapper
{
    width: 80%;
    margin: auto;   
}

Bonjour à tous,

J'ai un petit souci concernant le placement d'un menu au sein d'une page web.
Mon menu (<nav>) est inclus dans un div ("main_wrapper"), et contient 4 liens (4 puces <li> donc). Ce que j'aimerai faire, c'est centrer proprement ces 4 liens, et faire en sorte que les 2 liens aux extrémités s'alignent bien sur la ligne de la div "main_wrapper". Je ne sais pas si je suis bien clair dans ma description; en tout cas, voici le code correspondant :

[html]
<div id="main_wrapper">
<nav id="nav">
<ul>
<li><a href="blabla.html">LIEN1</a></li>
<li><a href="bloblo.html">LIEN2</a></li>
<li><a href="http://www.blublu.fr/">LIEN3</a></li>
<li><a href="blibli.html">LIEN4</a></li>
</ul>
</nav>

<!--suite du code-->
</div>
[/html]

[css]
nav
{
display: inline-block;
font-size: 2em;
width: 110%;
border-radius: 10px;
text-align: justify;
}

nav ul
{
list-style-type: none;
margin: 0px 0px;
padding: 0px;
}

nav li
{
display: inline-block;
}

nav ul li
{
border-top: 2px white solid;
border-bottom: 2px white solid;
margin-right: 85px;
}

#main_wrapper
{
width: 80%;
margin: auto;
}
[/css]

-->Le fait d'avoir mit la largeur de mon <nav> à 110% ne convient pas, car il dépasse le <div> main_wrapper par la droite, ce qui n'est pas sans poser de problème sur certains écrans. En gros, ce que je parviens pas à faire, c'est de bien caler le côté droit de mon dernier lien (LIEN4), avec la bordure du <div> (et donc avec la bordure du <nav>, qui est elle-même calée sur la bordure du <div>). Le côté gauche du LIEN1 doit bien sûr être calé sur la bordure gauche du <div> (donc du <nav>).
Quelqu'un aurait-il une idée ? Merci !