doubts to stylize an active link

$(document).ready(function(){
  $('.navbar a').on('click',function(){
    $('.navbar a').removeClass('active');
    $(this).toggleClass('active');
  });
});

.navbar-menu {    
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 30%;
    background-color: black;
}   
.navbar-menu:hover {
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 30%;
}
ul {
    list-style-type: none;
    margin: 0px; 
    padding: 0; 
    width: 100%;
    overflow: hidden;
    background-color: black;
}
li a {
    display: block;
    font-family: "CaviarDreams";
    color: white;
    text-align: center;
    padding: 12px 12px; 
    background-color:black ; 
}
li a:hover {
    color: white;
    text-decoration: none;
}
a {
    transition-timing-function: linear;
    transition: font-size 100ms;
}
a:hover {
    color: white;
    font-size: 20px;
}
li a.active {
    color: white;
    border-bottom: 4px solid #FCEE21;
    font-size: 20px;
}
li a:hover:not(.active) {
    color: white;
    font-size: 20px;
    border-bottom: 4px solid #FCEE21;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="navbar" class="nav" style="box-shadow: rgba(0, 0, 0, 0.5)">
   <div style="background-color: black; height: 10%; width: 100%;">
      <div class="navbar">
         <div style="flex-basis: 5%"></div>
         <div class="navbar-menu cortext2">
            <ul>
               <li>
                  <a class="active" href="#home">Home</a>
               </li>
            </ul>
         </div>
         <div class="navbar-menu cortext2">
            <ul>
               <li>
                  <a href="#quemsomos">Quem Somos</a>
               </li>
            </ul>
         </div>
         <div class="navbar-menu cortext2">
            <ul>
               <li>
                  <a href="#faleconosco">Fale Conosco</a>
               </li>
            </ul>
         </div>
         <div style="flex-basis: 5%"></div>
      </div>
   </div>
</div>
</div>

$(".menu-item").click(function(event){
    event.preventDefault();
   $(this).addClass("active").siblings().removeClass("active");
});

.navbar-menu {    
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 30%;
    background-color: black;
}   
.navbar-menu:hover {
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 30%;
}
ul {
    list-style-type: none;
    margin: 0px; 
    padding: 0; 
    width: 100%;
    overflow: hidden;
    background-color: black;
}
li a {
    display: block;
    font-family: "CaviarDreams";
    color: white;
    text-align: center;
    padding: 12px 12px; 
    background-color:black ; 
}
li a:hover {
    color: white;
    text-decoration: none;
}
a {
    transition-timing-function: linear;
    transition: font-size 100ms;
}
a:hover {
    color: white;
    font-size: 20px;
}
li.active > a{
    color: white;
    border-bottom: 4px solid #FCEE21;
    font-size: 20px;
}
li a:hover:not(.active) {
    color: white;
    font-size: 20px;
    border-bottom: 4px solid #FCEE21;
} 

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><divid="navbar" class="nav" style="box-shadow: rgba(0, 0, 0, 0.5)">
   <div style="background-color: black; height: 10%; width: 100%;">
      <div class="navbar">
         <div style="flex-basis: 5%"></div>
         <div class="navbar-menu cortext2">
            <ul>
               <li class="menu-item active">
                  <a href="#home">Home</a>
               </li>
               <li class="menu-item">
                  <a href="#quemsomos">Quem Somos</a>
               </li>
               <li class="menu-item">
                  <a href="#faleconosco">Fale Conosco</a>
               </li>
            </ul>
         </div>
         <div style="flex-basis: 5%"></div>
      </div>
   </div>
</div>