Problème navigation CSS/HTML

Bonjour,

Récemment, j'ai codé mon site et je voulais faire une navigation, une barre qui prend toute votre écran, et mettre une navigation dedans sans quelle dépasse de l'image en long mais je n'y arrive pas, je vais vous expliquez grâce à cette image: http://www.hostingpics.net/viewer.php?id=522659commentcamarche.png


le rouge c'est là ou apparaît ma navigation
et le violet la ou je voudrais le mettre !

Mon code HTML :

<div id="nav">
<nav>
<ul>
<li><a href=""><h1>Acceuil</a></h1></li>
<li><a href=""><h1>Guides</a></h1></li>
<li><a href=""><h1>Classes</a></h1></li>
</ul>
</nav>
</div>

-----------------------------
(Mon div nav est ma barre)
-----------------------------

Mon code CSS :

#nav
{
background: url('images/nav1.png');
height: 29px;
width: 101.6%;
margin: auto;
margin-top: -2.5%;
margin-left: -1%;
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
}

nav
{
display: inline-block;
width: 740px;
text-align: left;
}

nav ul
{
list-style-type: none;
}

nav li
{
display: inline-block;
margin-right: 15px;
}

nav a:hover
{
font-size: 1.3em;
color: #181818;
padding-bottom: 3px solid #760001;
}

Aidez moi s'il vous plait!!

Cordialement