네거티브 마진 % 개념으로 양옆에 사용하게

네거티브 마진
  /* 전체 뷰포트 너비 */
  --viewport-width: 100vw;

  /* margin의 % -> 컨테이닝블록의 너비 기준으로 계산, 즉 100%는 컨테이닝 블록의 너비 */
  --containing-block-width: 100%;

  /* 양쪽 날개 너비 구함 */
  --wings-width: calc(var(--viewport-width) - var(--containing-block-width));

  /* 한쪽 날개 너비 구함 */
  --wing-width: calc(var(--wings-width) / 2);

  /* 네거티브 마진으로 변환 */
  --wing: calc(var(--wing-width) * -1);

  --wing: calc(((100vw - 100%) / 2) * -1);

  /* 그리드로 만들기 */
  /* wrapper 버전 두개에서 동시에 활용 가능한 변수 */
  --wrapper-width: 960px; /* wrapper의 너비 */
  --wrapper-padding: 20px; /* wrapper의 좌우 패딩 (여유공간) */