Font size .9em effecting DIV width

Check out the following.

The font size of .9em in the *-header DIVs causes the specified width to be "ignored." When the font size is removed, the alignment with the subsequent input fields (and width) is correct. It renders incorrectly in FF 3.0 and IE 6.0. Any ideas?

body {
margin: 0;
padding: 0;
font-family: "Avant Garde", Verdana, sans-serif;
font-size: 62.5%;
color: "Royal Blue";
background-color: #FFFFFF;
vertical-align: baseline;
}
#main {
width: 72em;
background-color: #669999;
}
input {
margin: 0;
padding: 0;
}

.col-left {
float: left;
width: 14em;
margin-bottom: .6em;
background-color:#00CC33;
}
.col-middle {
float: left;
width: 14em;
margin-left: .8em;
margin-bottom: .6em;
background-color:#33CCFF;
}
.col-right {
float: left;
width: 14em;
margin-left: .8em;
margin-bottom: .6em;
background-color:#CC6666;
}
.col-left-header {
float: left;
width: 14em;
height: inherit;
margin-bottom: .3em;
font-size: 0.9em;
background-color:#00CC33;
}
.col-middle-header {
float: left;
width: 14em;
height: inherit;
margin-left: .8em;
margin-bottom: .3em;
font-size: 0.9em;
background-color:#33CCFF;
}
.col-right-header {
float: left;
width: 14em;
height: inherit;
margin-left: .8em;
margin-bottom: .3em;
font-size: 0.9em;
background-color:#CC6666;
}

Form Failuer