Question: How to avoid links shifting on hover while increasing font size in a navigation bar?

i want to create a navigation bar for my website that includes some links and a company logo upon it. The links should have customize spacing in them and means some at first and some at last of right edge . i also want to include an transformation that when the links are hovered the font size of the links increases without affecting or shifting the nearby links or content. i am having a problem as the font increases the neighbours links shifts themselves to maintain margin gap . What should i change or add in my code to do so ?
i basically tried to use hover subclass of link 'a'. it worked but not perfectly it shift the neighbour links . i am using margin left and right for each link and assigning unique margin for each. when i hover on a link each of the other links shifts themselves to maintain margin respectivley . i think is it good to use margin property in such cases or i should use float if yes then how to align them at particular distances. i am providing an online editor link of my code at end .
Or here is some part of my css code


body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    background-color: #f7f7f7;
    margin: 0;
}

header {
    background-color: black;
}

.navigation-bar {
    width: 100%;
    height: 76px;
    display: flex;
    padding: 10px;
    align-items: center;
}

.logo img {
    position: relative;
    left: 20%;
    height: 80px;
    width: auto;
}

.navigation-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation-links li {
    display: inline-block;
    margin-left: 90px;
    margin-right: 0px;
}

.navigation-links li a {
    font-size: 25px;
    color: white;
    text-decoration: none;
    text-align: center;
}

.navigation-links li a:hover {
    font-size: 30px;
}

/* join now class    */
.navigation-links li a.special1 {
    font-size: 25px;
    font-weight: bold;
    color: white;
    margin-left: 60px;
    margin-right: 0px;
    text-decoration: none;
    border: 2px solid rgb(226, 19, 54);
    border-radius: 50px;
    padding: 15px 10px;
    background-color: rgb(226, 19, 54);
}

/* login class */
.navigation-links li a.special2 {
    font-size: 25px;
    font-weight: bold;
    color: white;
    margin-left: 2px;
    margin-right: 0px;
    text-decoration: none;
    border: 2px solid white;
    border-radius: 50px;
    padding: 15px 40px;
    background-color: black;
}

/*resposive nature*/
@media screen and (max-width: 768px) {
    .navigation-links {
        display: none;
    }
}
<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

    <head>
      <title>Navigation Bar Example</title>
      <link rel="stylesheet" type="text/css" href="styles2.css">
    </head>
    <body>
        <header>
            <div>
                <nav class="navigation-bar">
                    <div class="logo">
                        <img src="rocket-g9cbacc798_1280.png" alt="Company Logo" > 
                    </div>
                    <ul class="navigation-links">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">About</a></li>
                        <li ><a class="special1"href="#">JOIN NOW</a></li>
                        <li ><a class="special2" href="#">LOG IN</a></li>
                    </ul>

                </nav>
            </div>
        </header>
        <!-- Rest of the content -->
    </body>
</html>



code link - https://codepen.io/Divyansh-Sharma-the-flexboxer/pen/JjmgJVy


Answer:
In the example below, there many ascetic changes which are optional. The following CSS is required:
li {
  /* Start vertically and horizontally center of `<li>` when transforming */
  transform-origin: center center;
  /* Original state is at normal size */
  transform: scale(1.0); 
  /* When state changes, stretch the duration by 0.7 seconds in a easing pattern */ 
  transition: 0.7s ease /* ✥ */;
}

/* When the user hovers over a <li>... */
li:hover {
  /* ...take it out of the normal "flow" of the document... */
  position: relative;
  /* ...give it a higher position on the z-axis... */
  z-index: 1;
  /* ...increase it's size by 20% */
  transform: scale(1.2) /* ✥ */;
}
/* ✥ Values can vary according to preference */ 

Initially each <li> is inert but has instructions when it is hovered over. When a <li> is hovered over it is out of the normal "flow" of the document and it's size will not interfere with any "static" elements (any element that doesn't have position: relative/absolute/fixed/sticky).
Note: Please review the example in Full Page mode, viewing in the iframe doesn't render perfectly (links are too small).


:root {
  margin: 0;
  font: 5vmin/1.15 Lato;
}

body {
  min-height: 100vh;
  margin: 0;
  background-color: #f7f7f7;
}

header {
  background-color: black;
}

nav {
  display: flex;
  align-items: center;
  width: 100%;
  height: clamp(3ex 80px 10vh);
}

nav img {
  display: inline-block;
  width: 20vw;
  height: auto;
  margin-right: 1rem;
}

menu {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

menu li {
  margin-right: 1.5rem;
  text-align: center;
  transform-origin: center center;
  transform: scale(1.0);
  transition: 0.7s ease;
}

menu li a {
  font-size: clamp(5rem 8vw 10rem);
  color: white;
  text-decoration: none;
}

menu li:hover {
  position: relative;
  z-index: 1;
  transform: scale(1.2);
}

.btn {
  min-width: 3rem;
  margin-right: 0.75rem;
  padding: 0.25rem 0.5rem;
  border: 2px solid rgb(226, 19, 54);
  border-radius: 50px;
  font-weight: bold;
  font-variant: small-caps;
}

.join {
  background-color: rgb(226, 19, 54);
}

.login {
  background-color: black;
}

@media screen and (max-width: 300px) {
  menu {
    display: none;
  }
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Navigation Bar Example</title>
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>

<body>
  <header>
    <nav>
      <img src="https://www.clipartmax.com/png/middle/31-316935_universe-rocket-icon-svg.png
" alt="Company Logo">
      <menu>
        <li><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li class="btn join"><a href="#">Join Now</a></li>
        <li class="btn login"><a href="#">Log In</a></li>
      </menu>
    </nav>
  </header>
  <!-- Rest of the content -->
</body>

</html>