add custom css class to nav menu items in wordpress

Question

this is my nav menu in HTML

                <ul class="col-sm-1 col-md-1 col-lg-8 p-0">
                  
                <li class="nav-item active ">
                    <a href="#" class="nav-link " role="tab" data-toggle="pill"><h5>Home</h5></a>
                    </li>
                    <li class="nav-item">
                    <a href="#" class="nav-link " role="tab" data-toggle="pill"><h5>Blog</h5></a>
                    </li>
                    <li class="nav-item">
                    <a href="#" class="nav-link " role="tab" data-toggle="pill"><h5>About US</h5></a>
                    </li>
                    <li class="nav-item">
                    <a href="#" class="nav-link " role="tab" data-toggle="pill"><h5>Contact us</h5></a>
                    </li>
                    
             </ul>

I want to Change this into a Wordpress Nav menu, Here is what i have done

my functions.php file

<?php

function register_ofoghweb_top_menu(){
   register_nav_menu('navbar','header-menu');
   
    }
add_action('init', 'register_ofoghweb_top_menu');


function add_menu_link_class($atts, $item, $args)
{
      $atts['class'] = 'nav-link " role="tab" data-toggle="pill';
      return $atts;
}
add_filter('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);

and Here's my header.php file for displaying Nav Menu

<div class="col-sm-1 col-md-1 col-lg-8 p-0">
                <?php 
                
                register_ofoghweb_top_menu();
                
                
                wp_nav_menu(
                      array(
                        'theme_location' => 'navbar',
                        'menu_class' => 'nav nav-pills nav-justified navbar',
                          'container'=>'ul',
                              'before'=>'<li class="nav-item">',
                          
                          'after'=>'</li>',
                        'container_class'=>'nav-item',
                          'fallback_cb'=>false,
                        'link_before' => '<h5>',
                        'link_after' => '</h5>'
                      )
                    ); ?>
</div>

The Problem is that the nav-item class for li is not showing up properly. and this is the result in Inspector:

<div class="col-sm-1 col-md-1 col-lg-8 p-0">
<ul id="menu-menu" class="nav nav-pills nav-justified navbar">

    <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-12"></li>

<li class="nav-item">
    <a href="http://localhost/site/" aria-current="page" class="nav-link &quot; role=&quot;tab&quot; data-toggle=&quot;pill">
        <h5>Home</h5>
</a>

</li>

I omitted the unnecessary codes.

Thanks for your help in advance.