Как убрать зазор между элементами?

Question

[Степан]

Как убрать этот зазор?

Поставил через after стрелочку. Подогнал пиксель к пиксель.
Размер стрелки 15px
И right: -15px

Когда масштабирую, появляется этот дурацкий зазор. Пока никак не получилось избавится.

li{
				text-transform: uppercase;
				color: #2a5297;
				font-weight: 700;
				font-size: 9px;
				letter-spacing: 1px;
				padding: 0 30px;
				box-sizing: border-box;
				flex-grow: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				&:nth-child(1){
					width: 145px;
				}
				&.active{
					background: #2a5297;
					color: #ffffff;
					&:after{
						content: '';
						display: block;
						position: absolute;
						width: 0;
						height: 0;
						border-style: solid;
						border-width: 24px 0 24px 15px;
						border-color: transparent transparent transparent #2a5297;
						right: -15px;
						top: 0;
						bottom: 0;
					}
				}
			}

Comments

[Дмитрий Беляев]

Выложите css код для этого элемента, посмотрим в чем проблема, так сложно сказать - могут быть и бордеры и маргины и паддинги лишние

Answer 1

[Антон Жуков]

А что без flex-а уже никак? между прочим он работает далеко не везде
caniuse.com/#search=flexbox

Comments

[Степан]

MrCheater caniuse.com/#search=flexbox

[Антон Жуков]

ie9 жив
да и не всякий айфон/андроид умеет

[Степан]

MrCheater самому стало интересно, задам отдельный вопрос

Answer 2

[dom1n1k]

Тоже сталкивался с подобной проблемой и тоже с flex-боксом. На десктопных браузерах всё ок, на мобильных появлялся зазор 1px. Долго ковырялся с ним и так и не победил. Пока забил, благо, критично верстку он не портит у меня.

Comments

[Степан]

dom1n1k а при чем тут flex ? Че все прицепились к этому flex. Он вообще не причем