你不需要JavaScript来显示/隐藏悬停时的内容。
我只是删除了JS悬停功能，并使用CSS代替。
然后我不使用CSS flex来居中图标，因为你想让它在悬停时保持居中并停留在同一个位置（+文本向右扩展）。所以，我使用边距的计算位置（calc()）来代替。
下面是代码。

// I just unfunction them you may remove it later because these are no need.

const labelElement = document.querySelectorAll(".lableCls");

function displayLabel() {

    for (i = 0; i < labelElement.length; i++) {
        //labelElement[i].style.display = "block";// no need, can be removed
    }
}

function hideLabel() {
    for (i = 0; i < labelElement.length; i++) {
        //labelElement[i].style.display = "none";// no need, can be removed
    }
}

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body {
    position: relative;
    height: 100vh;
    width: 100vw;
}

.container {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.topcontainer {
    position: relative;
    width: 100%;
    height: 75px;
    background-color: aqua;
}

.bottomcontainer {
    position: relative;
    width: 100%;
    height: 30px;
    border: 1px solid salmon;
}

.middlecontainer {
    position: relative;
    width: 100%;
    height: auto;
    flex-grow: 1;
    border: 1px solid black;
    display: flex;
}

.rightsidenavbar {
    position: relative;
    width: auto;
    min-width: 75px;
    height: 99%;
    border: 1px solid blue;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.rightsidenavbar:hover .lableCls {
    display: block;
}
.rightsidenavbar:hover .servicetabinnerCont {
    margin-right: calc((75px / 2) - (35px / 2));/* 75 is column width; 35 is icon width. (add this to beautify left and right spacing.) */
}

.servicescontaienrtab {
    position: relative;
    min-width: 75px;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 40px;
    width: 100%;
}

.servicetabinnerCont {
    position: relative;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    margin-left: calc((75px / 2) - (35px / 2));/* 75 is column width; 35 is icon width. */
}

img {
    height: 35px;
    width: 35px;
}

.lableCls {
    display: none;
    word-wrap: nowrap;
}

.mainservicecontainer {
    position: relative;
    height: 99%;
    flex-grow: 1;
    width: 80%;
    border: 1px solid yellow;
}

<div class="container">
    <div class="topcontainer">
    </div>
    <div class="middlecontainer">
        <div class="rightsidenavbar">
            <div class="servicescontaienrtab">
                <div class="servicetabinnerCont">
                    <img src="https://cdn-icons-png.flaticon.com/128/7910/7910833.png" alt="imagesrc not loaded">
                    <label for="" class="lableCls">Free Service</label>
                </div>
            </div>
            <div class="servicescontaienrtab">
                <div class="servicetabinnerCont">
                    <img src="https://cdn-icons-png.flaticon.com/128/7910/7910868.png" alt="imagesrc not loaded">
                    <label for="" class="lableCls">Shopping girl</label>
                </div>
            </div>
        </div>
        <div class="mainservicecontainer"></div>
    </div>
    <div class="bottomcontainer">
    </div>
</div>