在悬停时调整文本大小时如何将所有元素保持在其均匀的空间位置？

Question

我有一个导航栏，并在导航栏中间添加了链接，并带有

<template>
  <div id="navigation">
        <div class="left-column inline-flex">
            <nuxt-link to="/" class="title">Title</nuxt-link>
        </div>

        <ul class="middle-column">
            <li v-for="(link, text) in links" :key="text" :value="link">
                <nuxt-link :to="link" class="link">{{text}}</nuxt-link>
            </li>
        </ul>

        <div class="right-column"></div>
  </div>
</template>

然后我用]均匀地隔开它们>

<style lang="scss" scoped>
#navigation{
    display: inline-grid;
    grid-template-columns: 1fr 3fr 1.7fr;
    position: fixed;
    @include alphaBackgroundColor($primary-color, .7);
    height: 8vh;
    width: 100%;
    padding: 0px;
    margin: 0px;
    z-index: 100;
}

.left-column{
    grid-column-start: 1;
}

.middle-column{
    grid-column-start: 2;
    display: inline-flex;
    justify-content: space-evenly;
    align-items: center;
}

.right-column{
    grid-column-start: 3;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 50px;
}

.title{
    font-size: 21px;
    margin-left: 16px;
}

.title:hover{
    color: $tertiary-color;
}

.link{
    font-size: 17px;
}

.link:hover{
    font-size: 19px;

}

.inline-flex{
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
</style>
哪个效果很好！好吧，除了当我尝试在悬停时增加文本的大小时，所有元素都会移动，因为它们的间距均匀。那不是我想要的我该如何解决？

我有一个导航栏，我在导航栏的中间添加了