모바일에서 홈페이지를 손가락으로 밀었더니 화면 전체가 옆으로 살짝 밀리고 오른쪽에 빈 여백이 보인다면, 화면 폭보다 넓은 요소가 하나 숨어 있다는 뜻입니다.
body에 overflow-x: hidden부터 거는 분이 많은데, 원인 요소를 먼저 찾아 고치는 쪽이 부작용이 없습니다.

1. 넘치는 요소부터 찾기

PC 크롬에서 개발자 도구를 열고 모바일 화면(360px 정도)으로 바꾼 뒤, Console 탭에 아래 코드를 붙여 넣습니다. 화면 오른쪽 끝을 넘어가는 요소가 목록으로 찍히고, 항목에 마우스를 올리면 화면에서 위치가 표시됩니다.

// 화면 폭을 넘는 요소 찾기
const vw = document.documentElement.clientWidth;
document.querySelectorAll('body *').forEach(el => {
  const r = el.getBoundingClientRect();
  if (r.right > vw + 1 || r.left < -1) {
    console.log(Math.round(r.right), el);
  }
});

목록이 길게 나오면 가장 바깥쪽 부모부터 보면 됩니다. 부모 하나가 넘치면 그 안의 자식들도 함께 잡히기 때문입니다. 눈으로 확인하고 싶다면 잠깐 * { outline: 1px solid red; }를 넣어 테두리가 화면 밖으로 나간 상자를 찾는 방법도 있습니다.

2. 자주 나오는 원인과 고치는 법

실제 작업에서 찾아보면 원인은 대부분 아래 몇 가지 안에 있습니다.

특히 슬라이드나 스크롤 애니메이션 플러그인으로 "오른쪽에서 들어오기" 효과를 쓴 섹션은, 등장하기 전 상태의 요소가 화면 밖에 대기하면서 폭을 늘립니다. PC에서는 티가 안 나다가 모바일에서만 드러나는 대표적인 경우입니다.

3. 꼭 잘라야 한다면 clip으로, 범위는 좁게

애니메이션처럼 일부러 밖에 두는 요소라면 그 섹션에만 overflow-x: clip을 겁니다. hidden과 달리 clip은 스크롤 영역을 새로 만들지 않아서, 안쪽의 sticky 요소가 정상으로 동작합니다. 최신 크롬, 사파리(16 이상), 파이어폭스에서 지원하고, 오래된 브라우저를 위해 hidden을 앞에 한 줄 더 적어 두면 안전합니다.

/* 애니메이션이 있는 섹션만 */
.section-slide-in {
  overflow-x: hidden; /* 구형 브라우저용 */
  overflow-x: clip;
}