Pourquoi ma barre de navigation horizontale pleine largeur n'est-elle pas pleine largeur?

Question

Etrange problème celui-ci. Je veux que la barre de navigation du site suivant étende toute la largeur de la page.

http://testing.xenongroupadmin.com/bitesize/profile/summary.php

À première vue, il semble que cela fonctionne bien, aucun problème. Cependant, pour une raison quelconque, il y a une barre de défilement horizontale en bas. Lorsque vous faites défiler vers la droite, la barre de navigation s'arrête soudainement et laisse juste une grande zone vide. Comment puis-je me débarrasser de la barre de défilement de sorte que la page s'arrête sur le bord de la barre de navigation?

Le code HTML pour la barre de navigation est:

<div id="topbanner"> 
<div id="logologin"> 

<image src="../images/minibitesizelogo.png" id="logo" alt="Xenon Group Bitesize Logo" /> 

<ul id="topnav"> 
<li id="profile"><a href="../profile/summary.php">Home</a></li> 
<li id="choose"><a href="../choose/intro.php">Choose a Course</a></li> 
<li id="about"><a href="../about/whatis.php">About Bitesize</a></li> 
<li id="contact"><a href="../contact/contact.php">Contact Us</a></li> 
<li id="logout">Log Out</li> 
</ul> 

</div> 
</div> 

Et le CSS correspondant est:

body { 
      font-family: arial, tahoma, verdana, sans-serif; 
    background: linear-gradient(top, #FFFFFF 62%, #CDEDFA 89%); 
    background: -o-linear-gradient(top, #FFFFFF 62%, #CDEDFA 89%); 
    background: -moz-linear-gradient(top , #FFFFFF 62%, #CDEDFA 89%); 
    background: -webkit-linear-gradient(top, #FFFFFF 62%, #CDEDFA 89%); 
    background: -ms-linear-gradient(top, #FFFFFF 62%, #CDEDFA 89%); 
    margin: 0px; 
    width: 100%; 
    } 

div#topbanner { background-image: url('../images/navbar5.png'); 
     height: 55px; 
     background-repeat: repeat-x; 
     } 

div#logologin { margin: auto; 
     width: 950px; 
     } 

#logo { 
    float: left; 
    margin-top: 2px; 
    margin-right: 15px; 
    margin-left: 23px; 
     } 

ul#topnav { list-style-type: none; 
    margin: 0px; 
    } 

ul#topnav li { 
     width: 153px; 
     text-align: center; 
     border-left: thin solid #02a2e0; 
     height: 39px; 
     padding: 0px; 
     padding-top: 16px; 
     float: left; 
     background-image: url('../images/navbar5.png'); 
     } 

ul#topnav li#logout { border-right: thin solid #02a2e0; 
      } 

Toute aide à résoudre ce serait très apprécié!

Merci!

Answer 1

Votre div wrapper a une largeur de 1500px. Retirez-le ou changez-le à 100% et ça devrait aller.

Answer 2

l'aide d'un Dominspector, je vois que votre #wrapper a l'attribut

width: 1500px; 

se débarrasser de ça et ça fonctionne très bien.

Edit: oups, trop tard: V