Please add some CSS style.
Here is the full code.

$(document).ready(function () {
  //window.location.replace("https://vytalizehealth.com/");
  $(function () {

    $(".movement").hover(

      function () {
        $(this).css("fontSize", "20px");
      },
      function () {
        $(this).css("fontSize", "16.5px");
      })
  });
});

li {
  height: 20px;
  align-content: center;
  position: relative;
}
li a {
  position: absolute;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="col-xl-9 col-lg-9">
  <div class="main-menu  d-none d-lg-block">
    <nav>
      <ul id="navigation">
        <li><a class="movement" [email protected] style="@Html.IsSelected(actions: " Index", controllers: "Home"
            )">home</a></li>
        <li><a class="movement" style="@Html.IsSelected(actions: " FAQ", controllers: "Home" )" href="@(customurl+ "
            home/faq/")">FAQ</a></li>
        <li><a class="movement" style="@Html.IsSelected(actions: " Contact", controllers: "Home" )" href="@(customurl+ "
            home/Contact/")">Contact</a></li>

      </ul>
    </nav>
  </div>
</div>

Best regards.

I have the following code to show 3 links, beside each other:-

<div class="col-xl-9 col-lg-9">
    <div class="main-menu  d-none d-lg-block">
        <nav>
            <ul id="navigation">
                <li><a class="movement" [email protected] style="@Html.IsSelected(actions: "Index", controllers: "Home")">home</a></li>
                <li><a class="movement" style="@Html.IsSelected(actions: "FAQ", controllers: "Home")" href="@(customurl+ "home/faq/")">FAQ</a></li>
                <li><a class="movement" style="@Html.IsSelected(actions: "Contact", controllers: "Home" )" href="@(customurl+ "home/Contact/")">Contact</a></li>
              
            </ul>
        </nav>
    </div>
</div>

and i have this JavaScript to expand the font size of the hovered link

 $(document).ready(function () {
            //window.location.replace("https://vytalizehealth.com/");
            $(function () {
                
                $(".movement").hover(
                   
                    function () {
                        $(this).css("fontSize", "20px");
                    },
                    function () {
                        $(this).css("fontSize", "16.5px");
                    })
            }); });

but when the text get expanded on hover >> then the links on the left side and right side will get padded to the left and right >> so my question is how i can expand the text of the hovered link without moving the other links?
Thanks