Unknown white space appear on the right side of web page

Question

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 1

Faced this issue multiple times and in my case, it's generally a div or an element that is crossing the width of the screen thus stretching out, maybe try and analyze with chrome dev tools and inspect the layout, try and get rid of few divs and see if it changes anything, or maybe reduce the width of absolutely sized elements, etc.

Answer 2

Add this to the CSS:

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

Answer 3

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