html 오른쪽 여백 문제

이슈

모바일 화면을 작업하다가 오른쪽에 세로로 불필요한 여백이 발생하는 현상이 있었다. html, body 모두 padding, margin: 0를 넣었지만 이 기묘한 여백은 사라지지 않았다.

해결책

• html - 모바일보기에서 웹 사이트의 오른쪽에있는 여분의 공백을 제거하는 방법

다행히 이번 케이스와 거의 비슷한 현상을 호소하는 사람이 있었다. (심지어 1차 대응책도 같다.) 번역이 좀 이상해서 상세 내용은 이해하기 어렵지만 overflow-x: hidden;을 사용해보라는 답변이 있었다.
결론적으로 해결이 되었고 몹시 놀랐다...
overflow-x: hidden 은 부모 요소를 넘어가는 자식 요소를 보이지 않게 처리해준다.
따라서 이번 문제의 원인은 html 밑에 있는 어느 자식 요소가 html의 width값을 넘어섰기 때문이었다.