JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
				<li><a href="#">О компании</a></li>
				<li><a href="#">Прайс лист</a></li>
				<li><a href="#">Наши клиенты</a></li>
				<li><a href="#">Скидки</a></li>
				<li><a href="#">Акции</a></li>
			</ul>

CSS

.nav {margin:20px auto; }
		.nav li {float:left; line-height: 4.3; list-style-type:none; background: red;  }

		.nav li a {color:#fff; display: block;  padding:0 30px; margin-top:-6px;}
        .nav li a:hover {background: orange;}

/** У меня при наведении съезжают ссылки на 6 пикселей верх. Как это исправить?**/