Display: Block link is taking more width in firefox browser vs google chrome

Display: block is taking more width in firefox, please find the code below

<ul class="mn_mainNav">
<li><a href="#">All Offers</a></li>
<li><a href="#">All Offers</a></li>
<li><a href="#">All Offers</a></li>
</ul>

.mn_mainNav {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;

    & > li {
      & > a {
        display: block;

        &:first-letter {
          text-transform: uppercase;
        }
      }

    }
  }

JSFIDDLE LINK

Chrome:

vs firefox:

Any pointer will be appreciated

Note: I do need the first letter for the li link to be upper case