Как решить проблему с отступами?

Question

[Сергей Зеленский]

Добрый день, верстаю адаптивный дизайн, и вот что получается, на пунктах меню появляются маленькие отступы, кто сталкивался с такой проблемой, для всего есть reset, использовал правда и px и vw, vh меню стандартной структуры ul>li>a

.main
	{
		width:100vw;
		height: 100vh;
		background:#ededed;
	}
	.search-top-box
	{
		background:#333333;
		padding:5px 5px;
		box-sizing:border-box;
		position:absolute;
		top:0;
		width:100vw;

	}
	.search-top-box input[type="text"]
	{
		border:1px solid #353535;
		width:calc(100vw - 25px);
		height: 30px;
		background:#d1d1d1;
		border-radius: 5px;
		padding-left: 10px;
		font:500 15px/30px 'verdana';
		color:353535;
		/*margin:3px 3px;*/
	}
	.menu-top-box
	{
		position:relative;
		top:42px;
		background:#333333;
		border-top:3px solid #3E3C3C;
	}
	.menu-top-box li
	{
		display: inline-block;
		height: 30px;
		width:calc(100vw / 3);
		margin-right:0;
	}
	.menu-top-box li a
	{
		color:#fff;
		display: block;
		height:30px;
		text-shadow:1px 1px 1px rgba(0,0,0,0.75);
		text-decoration: none;
		font:500 13px/28px 'Arial';
		text-align: center;
		-webkit-transition: background 400ms linear;
		-moz-transition: background 400ms linear;
		-ms-transition: background 400ms linear;
		-o-transition: background 400ms linear;
		transition: background 400ms linear;
		background:#717874;
	}
	.menu-top-box li a:hover
	{
		background:#717874;
	}

	.no-mobile
	{
		display: none!important;
	}

Comments

[Владимир Серых]

Без кода решить неконкретную проблему достаточно проблематично.

Answer 1

[Виталий Инчин ☢]

Все ответы --> тут <--.

Answer 2

[Владимир Серых]

Возможно, дело в пробельных символах.

Если так, то это должно помочь:

1. Установить нулевой кегль для контейнера меню:

.menu
{
  font-size: 0;
}

2. Установить нужный кегль для пунктов меню

.menu li
{
  font-size: 14px;
}

Answer 3

[Aleksandr]

Используйте flexbox
А вообще я так думаю, что вы используете inline-block -> пропишите родителю font-size: 0;