CSS Nav Bar Padding and Overflow - html

Question

So I have a horizontal navigation bar styled in CSS. My issue is that there seems to be some bottom padding on the bar, but I do not know where it is coming from.
Additionally, when the nav bar becomes really narrow (resizing the window, mobile, etc), it overflows out of the encircling div. How can I prevent this?
Here is the 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;
}

Answer 1

Your elements should fill the space naturally, and .nav should not depend on an explicit height. This will allow for things like font-size to change, etc., and prevent the children from overflowing the parent.
Here's the solution: http://jsfiddle.net/m8pWa/3/
Remove the height on .nav.
On .nav li a, change display: block; to display: inline-block;, and remove float: left;.
.nav {
margin: 0 auto;
padding: 0;
width: 75%;
}
.nav li a {
display: inline-block;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}

Answer 2

Nothing to do with padding this time. You have your height set at a fix height I changed it to 1.74ems and it was spot on.
.nav {
margin: 0 auto;
padding: 0;
width: 75%;
height: 1.74em;
}
For the nav collapsing when the screen size is a set width,
You do not need to worry unless the screen size is 379px in width and to be honest, no screen is that small unless it is a mobile device.
In that case if you will need to support mobile devices and should look into media queries.
JSFIDDLE

Answer 3

i guess the problem came from the height of 1px you added in thenav
margin: 0 auto;
padding: 0;
width: 75%;
height: 2em;
}
i made changed it to 1.8em and it solved it
margin: 0 auto;
padding: 0;
width: 75%;
height: 1.8em;
}
also it depends also on the monitors, they differ in size therefor their display