Custom jQuery to read window resize is working only when the viewport is an even number

Question

I have a WP website whose header (.wp-container-6) contains a logo-container and a nav (.wp-container-5) in a row. nav has a padding-right matching logo-container's width, so it always stays in the middle. However, when they don't fit together and nav goes to a second row, I need it to lose the padding, for which I have the following jQuery code:

wrapped();

$(window).resize(function() {
   wrapped();
});
    
    function wrapped(){
    $('.wp-container-5').each(function() {
                var itemWidth = $(this).width();
                var containerWidth = $(this).parent('.wp-container-6').width();
                if (itemWidth >= containerWidth) {
                    $(this).addClass('wrapped');
                    
                } else {
                    
                    $(this).removeClass('wrapped');
                }
            });
    }

It's mostly working fine, but today I realized on the following: when the viewport's width is between 1377px and 1593px, this function will add 'wrapped' to .wp-container-5 when the viewport's width is an even number and remove it when it's odd. Hence, you can imagine how crazy it looks when you're resizing among those widths and the header constantly moves from one row to two and vice versa. I have been trying to figure out the reason or how to handle it but it's so random I can't simply understand what's wrong on what I did.

If there is any information I can add other than this, please feel free to ask and I'll add it immediately.