[CSS] 모바일에서 오른쪽에 흰 여백 생기는 현상 (CSS, React)

html, body에 margin: 0을 하고 요소에 width: 100%을 줘도 오른쪽에 흰 여백이 생긴다면

어떤 요소의 width가 innerWidth를 넘었다는 뜻이다.

html, body에 overflow-x: hidden을 해주면 가로 스크롤바와 오른쪽 여백이 사라진다.

 

html, body {
  margin: 0px;
  overflow-x: hidden;
}

 

React라면 순수 html, CSS만 이용할 때와 마찬가지로 index.css 파일에 적용해주면 된다.