Issues with custom CSS

Hi,
I managed to place everything I needed in my navigation and also set all the hovering effects.
My issue is now whenever I hover over the items, it seems that they are moving slightly.

Is there something I can do about that?
And since my site has not been published yet, I don't have any links to share. But here is a screen recording of my site.
Hope that will help to understand what I mean.

By the way, here are all the codes I used for that:

//––– Nav-Menu

body:not(.header--menu-open) .header-nav-item--active>a {
    background-image: none !important;
}

.header-nav-item--active a{
font-weight:400 !important;  
}

.header-nav a:hover{
font-weight:400 !important;
}

//––– Social Media
//–––––––––––––––––––––––––––//
.header-actions-action--social  {
// position:fixed;
 //right:3vw;
 //top:1.75vw;
 scale:90%;
}

.header-actions--right .header-actions-action--social .icon:not(:first-child) {
margin-left: 2.5vw;
margin-right: 2vw;
}

//––– CTA - Button

.header-actions .btn {
 //top:1vw;
// height:2vw;
//  margin:1vw 0 1vw 1vw!important;
 // border: solid red 1px!important;
}

.header-actions .btn:hover {
 background-color: white;
 color:#111111;
 font-weight:bold !important;
 box-shadow: inset 0 0 0 2px #111111;
}

1 hour ago, Nima said:

My issue is now whenever I hover over the items, it seems that they are moving slightly.

The navigation moves because bold text is wider than standard-weight text. It's tricky to get around this problem, but could be done with setting minimum widths for the links.

On 12/8/2023 at 1:15 PM, Ziggy said:

The navigation moves because bold text is wider than standard-weight text. It's tricky to get around this problem, but could be done with setting minimum widths for the links.

I tried it out, but it didn't work how I liked it to.
I know it is because of the bold text, but I thought I could help by widening the margins or something like that, but that didn't work either.

You may want to try this additional CSS, but please adjust the pixel EM to as small as you can:

.header-nav a {
  min-width:9.5em;
}