menu - Why Percent-Padded CSS List Item Changes Width on Click? -

i've tried googling , searching here, can't understand what's happening.

i want menu list items % based, give them % width, same width. want nicer , have borders within distance relative text width if makes sense. decided use table cells , % padding. looked nice until started clicking links. width of each list item starts changing. no idea why it's happening , how solve this. hope can help.

* {  	margin:0;padding:0;  }  #nav {  	display: table;  	text-align: center;  	width: 100%;  	background-color: #ff9;  }  #nav ul {  	display: table-row;  }  #nav ul li{  	display:table-cell;  	margin:0;  	padding:1em 3%;  	border-color:#000;  	border-style:solid;  	border-width:0 1px 0 0;  		   }  #nav ul li:last-child{  	border: none;  }

<div id="nav">  <ul>  <li><a href="#">home</a></li><li><a href="#">about</a></li><li><a href="#">products</a></li><li><a href="#">faq</a></li><li><a href="#">support</a></li><li><a href="#">contact</a></li>  </ul>  </div>

ok turns out removing padding stops glitch happening. , previous commentator suggested using em works great. not sure why decided use %. nevertheless, it's odd glitch happens after click.