Почему переменный элемент списка элементов в процентах меняется на ширину?

Question

Я пробовал искать и искать здесь, но не могу понять, что происходит.

Я хочу, чтобы элементы меню были% на основе, я мог бы дать им% ширины, но тогда все они были бы одинаковой ширины. Я хочу, чтобы он выглядел лучше и имел границы на расстоянии относительно ширины текста, если это имеет смысл. Поэтому я решил использовать ячейки таблицы и% заполнения. Все выглядело хорошо, пока я не начал нажимать ссылки. Затем начинает изменяться ширина каждого элемента списка. Не знаю, почему это происходит и как это решить. надеюсь, вы можете помочь.

* { 
 
\t margin:0;padding:0; 
 
} 
 
#nav { 
 
\t display: table; 
 
\t text-align: center; 
 
\t width: 100%; 
 
\t background-color: #FF9; 
 
} 
 
#nav ul { 
 
\t display: table-row; 
 
} 
 
#nav ul li{ 
 
\t display:table-cell; 
 
\t margin:0; 
 
\t padding:1em 3%; 
 
\t border-color:#000; 
 
\t border-style:solid; 
 
\t border-width:0 1px 0 0; 
 
\t \t } 
 
#nav ul li:last-child{ 
 
\t 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>

Answer 1

хорошо получается просто удаление отступы останавливает этот глюк от происходящего. И, как сказал предыдущий комментатор, использование em отлично работает. Не знаю, почему я решил использовать%. Но тем не менее, странно, что глюк происходит после щелчка.