Solve end mobile page appears X-axis horizontal scroll bar problem

Recently wrote a need to adapt the mobile phone side of the official website, found that mobile end after finishing always horizontal scroll bar will appear, which is the X-axis scroll bars, leading to slide to slide around the page, on the map:

 

 It is troubling, even if you set overflow-x: hidden and width: 100% can not be removed, but later found the main reason for this problem is to occur,

Since the content leads to more Y-axis scroll bar appears, takes up the width of the page, leading X-axis scroll bar appears when you use an adaptive framework to do, affect the user experience.

Would only need to add the following code in CSS can be the perfect solution, after my mother no longer have to worry about my code will be a horizontal scroll bar.

code show as below:

html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}