How to wrap the list with custom class using wp_nav_menu?

Perhaps use a nav_walker or a filter on wp_nav_menu_objects

Here is a simple nav_walker which, when output on wp_nav_menu will wrap the contents of each link in the menu with a span

<?php
/**
 * Add_Span_Nav_Walker
 * wp_nav_menu walker-class to wrap contents of each menu-item link in span element
 */

class Add_Span_Nav_Walker extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 0, $args = [] ) {
        $indent = str_repeat( "t", $depth );
        $output .= "n$indentn";
    }

    function end_lvl( &$output, $depth = 0, $args = [] ) {
        $indent = str_repeat( "t", $depth );
        $output .= "$indentn";
    }

    function start_el( &$output, $item, $depth = 0, $args = [], $id = 0 ) {
        $indent = ( $depth ) ? str_repeat( "t", $depth ) : '';

        $class_names = $value = '';

        $classes   = empty( $item->classes ) ? [] : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );

        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '';

        $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) . '"' : '';
        $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) . '"' : '';
        $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) . '"' : '';
        $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) . '"' : '';

        $item_output = $args->before;
        $item_output .= '<li' . $class_names . '><a' . $attributes . '><span>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</span></a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }


    function end_el( &$output, $item, $depth = 0, $args = [] ) {
        $output .= "n";
    }
}

When we output our nav_menu in the them we can use Add_Span_Nav_Walker as the walker class:

<?php
if ( has_nav_menu( 'wpse288486_nav' ) ) :
    wp_nav_menu( [
        'theme_location' => 'wpse288486_nav',
        'walker'         => new Add_Span_Nav_Walker(),
    ] );
endif;

It is best to loop through all the menu items so you can get them separately, like this. This will give you the possibility to add classes to both your ul and your li items.

    <?php $myMenu = get_nav_menu_locations();

// 'main-menu' is the name of your menu, you can find this under 'menu' in the Dashboard of your Wordpress site
$menuID = $myMenu['main-menu'];

$mainNav = wp_get_nav_menu_items($menuID);

?>
<ul>
    <?php foreach ($mainNav as $navItem): ?>

        <li>
            <a href="<?php echo $navItem->url; ?>"
              title="<?php echo $navItem->title; ?>">
              <?php echo $navItem->title; ?>
          </a>
      </li>
  <?php endforeach; ?>
</ul>