why my element.right + element.left is more than screen.width in javascript?

I want to show popup div with absolute position on top of the element clicked. but the pop up shown on wrong position (in responsive size). when I console.log(rect.left) and console.log(rect.right), the sum of these are more screen.width

here is the popup function:

 function show_popup(element){
    var rect = element.getBoundingClientRect();
    console.table(rect);
    console.log('rect left : ' + rect.left);
    console.log('rect right: ' + rect.right);
    console.log('screen width :' + screen.width);
    x = (rect.right - ( $('#popup').width() / 2 ));
    x = x < 0 ? 0 : x ;
    $('#popup').css({right :  x  , bottom: 90 });
    $('#popup').fadeIn('slow');
    setTimeout(() => {
         $('#popup').fadeOut('slow');
    }, 3500);
}

the popup css :

.popup {
display: none;
background-color:rgb(248, 248, 87);
position: fixed;
z-index: 1050;
padding: 0.4rem;
border-radius: 15px;
}

I have had this problem for two weeks, how can I solve that? how can I get the correct right for show the popup?

thanks in advance