Problème inline-block

Bonjour,
je suis apprenti webmaster et il y a un bug dans ma page, il est tout simple:

pour aligner mon menu et ma section de page, je les transforme en inline-block avec display (dans un fichier .css). Ca foctionne jusqu'à ce que j'attribue une largeur de 250px, et là ca ne marche plus.

CSS:

nav
{
font-size: 18px ;
font-family: "Courier New", serif ;
background-color: black ;
color: white ;
width: 250px ;
display: inline-block ;
}

section
{
display: inline-block ;
}

HTML:

<nav>
<ul>
<li>Accueil</li>
<li><a href="sketchs/sketchs.php">Sketchs</a></li>
<li><a href="podcasts/podcasts.html">Podcasts</a></li>
<li><a href="jw/jw.html">JW</a></li>
</ul>
</nav>

<section>
<header>
<h1>AdulescensSHOW</h1>
<h2>AdulescensSHOW, trois ados mènent une vie extraordinaire, mais on en a rien à foutre...</h2>
</header>

<p>
Ave, fan de nos sketchs!<br />
Te voici sur notre site de ouf, dans la page d'accueil qui ne sert à rien.
</p>

<p>
Ici admire nos sketchs et tout le reste!
</p>

<p>
Mais là n'est pas ta seule tâche car maintenant que tu es arrivé(e), tu auras des corvées:
<ol>
<li>Devient fan sur <img class="image_in_texte" src="images_du_site/facebook.jpg" alt="Facebook" />,</li>
<li>Viens sur <img class="image_in_texte" src="images_du_site/twitter.jpg" alt="Twitter" />,</li>
<li>Abonne-toi à nos chaînes <img class="image_in_texte" src="images_du_site/youtube.png" alt="YouTube" />,</li>
<li>Et met 43 milliards de milliards de <img class="image_in_texte" src="images_du_site/pouce_vert.png" alt="Pouce vert YouTube" />!</li>
</ol>
</p>

<p>
Bonne visite à tous les non-flemmards qui vont la continuer.
</p>
</section>


Merci d'avance pour toute explication sur ce phénomène...zarbi.