Bootstrap container에서 margin 0 문제

Bootstrap을 사용할 때 .container나 .container-fluid에 margin: 0;을 적용하면, 내부 콘텐츠가 자동으로 왼쪽 정렬되는 경우가 있습니다.

이는 브라우저 기본 블록 요소 정렬 방식 때문인데, margin이 제거되면 가운데 정렬이 풀리게 됩니다.

해결 방법: margin auto 적용

이럴 때는 다음과 같이 margin: 0 auto;를 적용하면 중앙 정렬이 다시 복원됩니다.

.container {
  margin: 0 auto;
}

margin: 0 auto;는 좌우 여백을 자동으로 맞춰, 컨테이너가 화면 가운데 오도록 정렬해 줍니다.

정리

• margin: 0; → 자동 왼쪽 정렬
• margin: 0 auto; → 가운데 정렬 복원

간단한 속성 변경으로 레이아웃 문제를 쉽게 해결할 수 있습니다.