CSS EM Measurements messing up?

Question

I'm having a problem with the em units, I have set the navlist width to 6.250em the equivalent to 100px and is working fine. When I change the width for each li to 6.250em it won't stretch out to the same width as the navlist. Why does this happen and how do I fix it?

CSS Code:

.navlist {
  width: 100px;
  height: auto;
  float: left;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: #000; 
}
.navlist li {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  text-shadow:0px 1px #14161A; 
}
i {
  font-size: 26px;
  padding-bottom: 6px;
}
a.nav-buttons {
  width: 6.250em;
  height: 60px;
  display: block;
  display: table-cell;
  vertical-align: middle;
  color: #CCC;
  text-decoration: none;
  background-color: #666;
  border-top: 1px solid #2E3139;
  border-bottom: 1px solid #14161A; 
}
a.nav-buttons:hover, a.nav-buttons:focus {
  color: #fff;
}

HTML Code:

<ul class="navlist">
    <li><a href="#" class="nav-buttons"><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#" class="nav-buttons"><i class="fa fa-info-circle"></i> About</a></li>
</ul>

JSFiddle Here: http://jsfiddle.net/2ZT9w/1/

Answer 1

ems are relative to their parent so li is relative to nav and not nav's parent. You reset the font size on the li. Assuming it's different than what is on nav, that would also change the value of an em on the li to 1em=14px.

If the font size for the navlist was never changed, and equal to the default size of the body which is 16px, then that's your problem cause 1em on navlist would equal 16px while 1em on the li would equal 14px.