return (
  <div
    style={{
      display: 'flex',
      minHeight: '100vh',
      alignItems: 'center',
      justifyContent: 'center',
    }}
  >
    <Container />
  </div>
)

문제

• css 박스를 가득 채우다보면 margin-bottom을 줘도 먹히지 않거나 잘려있을 때가 있음
• 위 코드에서 Container의 크기가 지정 됐음에도 컨텐츠가 그 이상으로 들어가면 우리 배가 늘어나는 것처럼 비정상적으로 늘림

코드 해석 및 해결

• 위 코드는 최상단 div에 flex를 이용하여 컨테이너를 가운데 배치함
• 'min-Height: 100vh'를 주면 최소 높이가 100vh로 이미 최대가 되고, margin-bottom도 잘 먹힌다.