How to remove the gap between elements?

Question

HTML

How to remove this gap?
Delivered through after an arrow. Fitted pixel to pixel.
The size of the arrow is 15px
And the right: -15px
When I scale it, there is this stupid gap. So far haven't been able to get rid of it.

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;
          }
        }
      }

Answer 1

And what without flex already in any way? by the way, it does not work everywhere
caniuse.com/#search=flexbox

Answer 2

I also faced a similar problem and also with flex-boxing. On desktop browsers everything is ok, on mobile there was a gap of 1px. Long tinkered with him and never won. While he scored, fortunately, he does not spoil the layout critically for me.