悬停后元素会改变宽度（？）

Question

所以我为网站制作菜单，每当网站加载菜单看起来像img＃1时，侧面的图标都堆叠在一起，这是我不想要的。 img1 将鼠标悬停在图标上后，它们会正确叠加img＃2。 after hovering 这是我真正想要的。 我确信这只是一件小事，但我无法解决这个问题？

nav {
    height: 40px;
    background-color: var(--main-bg-color);
    width: 100%;
    margin: 2% 0;
}

.menu-icon {
    display: none;
}
.main-nav {
    margin-right:auto;
    padding-left:4%;
    width:fit-content;
}
nav li {
    display: inline;
    padding-right:5%;
}

nav a {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    color: var(--light-color);
    font-family: var(--font-h);
}
.icon-nav{
    margin-left:auto;
    padding-right:4%;
}
.icon-nav a{
    padding: 0 5%;
}

HTML

<nav>
    <div class="menu-icon">
        <i class="fa fa-bars" aria-hidden="true"></i>
    </div>
        <div class="main-nav">
            <ul>
                <li>
                    <a href="/">Home</a>
                </li>
                <li>
                    <a href="/#about-me">About me</a>
                </li>

                <li>
                    <a href="/#skills">Skills</a>
                </li>
                <li>
                    <a href="/#portfolio">Portfolio</a>
                </li>
                <li>
                    <a href="/#contact-wrapper">Contact</a>
                </li>
            </ul>
        </div>
        <div class="icon-nav">
            <a href="" target="_blank">
                <i class="fa fa-github" aria-hidden="true"></i>
            </a>
            <a href="" target="_blank">
                <i class="fa fa-twitter" aria-hidden="true"></i>
            </a>
            <a href="" target="_blank">
                <i class="fa fa-linkedin" aria-hidden="true"></i>
            </a>
        </div>
</nav>