jQuery calculate parent width from children

Question

I'm trying to calculate the total width of a submenu relative to the children. The following code only works fine in the first submenu, The second submenu needs a manual +1 in the width to make it work, else the last item will be pushed down.

$('nav.primary').find('ul.sub-menu').each( function() {
    var width = 0;

    $(this).find('li').each( function() {
        width += $(this).outerWidth();
    });

    $(this).css({
        'width': width + 'px'
    });

    $(this).hide();
});

<li>
    <a href="/oplossingen/">
       Oplossingen<span class="fo icons-angle-down"></span>
    </a>
      
  <ul class="sub-menu">
 <li>
      <a href="/oplossingen/mvo-adviesdiensten/">
        MVO Adviesdiensten
      </a>
    </li>      
    <li>
      <a href="/oplossingen/co2-prestatieladder-advies/">
        CO2-Prestatieladder Advies
      </a>
    </li>
  </ul>
</li>

The correct example:

The wrong example:

Width +1

There isn't any other difference between odd and even items except the background color.

I've found the following similar question which couldn't solve my problem: Calculate total width of Children with jQuery