Menu Auto Padding to perfectly fit width

So having some problems with using the css to fit the menu to the exact width (100%) since ie, chrome, safari, and firefox all read the css file slightly differently. Curious how to take the menu .css you have created, fairly unchanged, and set it as an auto width. Standard .css approaches have not worked for me in this regard.

.navigation {
  background: transparent url(../images/main-sprite.png) repeat-x scroll left top;
  height: 45px;
  margin-top: -47px;
}
#navigation li{
  background: transparent url(../images/main-sprite.png) repeat-x scroll left top;
  list-style: none;
  float: left;
  margin-left: 0px;
  height: 45px;
  line-height: 45px;
  width:auto;
}
#navigation li.active,
#navigation li:hover {
  background-position: left -45px;
}
#navigation a {
  color: #FFF;
  display: block;
  font-size: 12px;
  font-weight:bold;
  padding: 0 17px;
  text-decoration: none;
  text-transform: uppercase;
}
#navigation a:hover,
#navigation a:visited {
  color: #FFF;
  text-decoration: none;
}