Unknown white space appear on the right side of web page

Here’s the look:

[]

I did the page in ReactJS, but I’ve made a copy of the page here.

To better show the white space, here’s the screenshot:

several interesting observations:

• when the page is first loaded, there’s no such issue.
• the issue only appear, when the second image box (the one with 100% bar there) added into DOM
• screen.width = 375
• $('html').width() = 375, also
• I don’t know how and why the white space appeared, nor can I find any element having width > 375. (I didn’t check through all element though)
• $('body').find('div').each(function(idx,e){if($(e).width() > 375) console.log($(e).width())}) would give me no output
• I try to do inspect on that white area, cannot. It would imply show me the body
• this issue appear both on web and on mobile
• this issue doesn’t appear for the code in codepen I’ve shown above, although that code is an exact copy of the HTML generated (I copied directly from Chrome Inspector), with all the javascript removed

Any idea on: 1) why the white space appeared? 2) how could I solve the issue?

PS: just in case if you missed the part I put link to CodePen, Here it is again.

Update 2: I have this input box which I’m placing outside the page:

<input type="file" class="attache-upload-button" data-reactid=".0.0.1.3.1.1.0.0.1">

Corresponding style:

.review-add-form form .uploader .attache-upload-area .attache-upload-button {
  position: fixed;
  top: -1000px;
}

Answer

I inspected the DOM with chrome inspector, and i saw that the <svg class="bar"> is exceeding in width. I tried to set a overflow: hidden to the containing element, .progress-bar-circle and the whitespace disappeared