CSS la Barre de navigation de Rembourrage et de Dépassement

Donc, j'ai une barre de navigation horizontale de style CSS. Mon problème est que il semble y avoir un remplissage en bas sur la barre, mais je ne sais pas d'où il vient.

En outre, lorsque la barre de navigation devient très étroit (le redimensionnement de la fenêtre, mobile, etc), il déborde de sortir de l'encerclement de la div. Comment puis-je éviter cela?

Voici le JSFiddle:

http://jsfiddle.net/m8pWa/

CSS:

 html, body {
margin: 0;
padding: 0;
background-color: #E0F2F7;
}
.header {
margin: 0 auto;
text-align: center;
background-color: #81BEF7;
padding: 1px;
color: #FAFAFA;
}
ul {
margin: 0;
padding: 0;
}
.nav {
margin: 0 auto;
padding: 0;
width: 75%;
height: 2em;
}
.nav ul li {
list-style-type: none;
display: inline;
overflow: hidden;
}
.nav li a {
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
.nav li a:hover {
background: white;
color: #A4A4A4;
}
.nav-wrapper {
background-color: #58ACFA;
padding: 1px;
}
.wrapper {
margin-right: auto;
margin-left: auto;
width: 75%;
}
/* this centers the internal elements */
.centered {
text-align: center;
}
/* gives a main content window to the left that is 70% of the main */
.content {
width: 70%;
float:left;
}
/* makes a sidebar to the right that is 30% of the main and floating right */
.sidebar {
width: 30%;
float:right;
}
.sidebar ul {
padding: 10px;
}