큰 화면에서 본문 영역이 좌우로 더 이상 늘어나지 않고 가운데 정렬이 되도록 하는 방법

max-width 값을 줘서 화면의 좌우 크기가 특정 width를 넘어가더라도 더 이상 커지지 않도록 설정한다. 

좌우의 margin 값을 auto로 두면 여유 공간이 생겼을 때 좌우 margin이 동일하게 늘어난다. 

결과적으로 가운데 정렬이 된다.

 

.container {
  max-width: 800px;
  margin: 0 auto;
}