Menu verspringt - ich finde den Fehler nicht

[Drapondur]

So,

wenn man den Code von

#menu .active {  
  height: 20px;  
  padding: 5px 20px 0 20px;  
  background-color: #d2c7a8;  
  color: #211f1f;  
}

in

#menu .active {  
  height: 20px;  
  padding: 5px 20px 0 37px;  
  background-color: #d2c7a8;  
  color: #211f1f;  
}

ändert (padding links vergrößert), dann springt die Schrift im Menu nicht mehr.
Aber der Hover-Hintergrund ist nun nicht mehr mittig.

Wenn das noch hinhauen würde, wäre ich am Ziel. Aber wie?

Nochmal das ganze Menu-CSS:

#menu {  
  height: 25px;  
  font-family: 'PT Sans',sans-serif;  
  color: #d0c5a6;  
  padding: 315px 0 0 95px;  
  width: 650px;  
}  
  
#menu ul {  
  background-color: #201f1f;  
  height: 25px;  
  padding-top: 5px;  
  padding-left: 5px;  
}  
  
#menu ul li {  
  float: left;  
  text-align: center;  
  list-style: none;  
  height: 25px;  
  font-size: 15px;  
}  
  
#menu ul li a {  
  text-decoration: none;  
  display: block;  
  height: 20px;  
  padding: 5px 20px 0 20px;  
  color: #d0c5a6;  
}  
  
#menu ul li a:hover {  
  background-color: #d2c7a8;  
  color: #211f1f;  
}  
  
#menu ul li a:hover span {  
  color: #211f1f;  
}  
  
#menu span {  
  color: #c3c3c0;  
  font-size: 10px;  
  display: block;  
  margin-top: 5px;  
}  
  
#menu .active {  
  height: 20px;  
  padding: 5px 20px 0 37px;  
  background-color: #d2c7a8;  
  color: #211f1f;  
}  
  
#menu .active span {  
  color: #211f1f;  
}