Footer 개발 중 발생한 오류

어제 역할배분을 나눴는데, 내가 우선 Header와 Footer를 담당하기로 하였다.
그리 어려운 작업이 아니라 생각했기에 금방 끝낼 줄 알았는데, 하루를 다 써도 Footer를 완성시키지 못했다.

왜냐하면.....

문제는 바로 저 왼쪽에 생긴 여백.

개발자 도구를 활용해서 살펴보니 이렇게 나왔다.

코드를 아무리 살펴봐도 저런 값을 준 적이 없어서 도무지 이해가 가지 않았다.

모든 padding이나 margin 값을 좌우대칭으로 줬었기에 저런 비대칭이 나온다는게 이해가 되지 않았다.

몇 시간 동안이나 Footer 컴포넌트 안의 스타일드컴포넌트 요소들을 이것저것 수정해봐도 결국 해결하지 못했다.

#root {
  /* max-width: 1060px;
  margin: 0 auto; */
  padding: 2rem;
  color: #333333;
}

사실 문제는 Footer 컴포넌트 안에 있던게 아니라 App.css에 있었다.
padding: 2rem 을 삭제해주니 문제가 깔끔히 해결됐다.

문제는 해결했지만, 아직도 왜 padding: 2rem 이 문제를 일으켰는지 이해가 되질 않는다.

좌우 양쪽다 여백이 생겼으면 모르겠지만, 왼쪽에만 여백이 생기다니..!?!?

예상소요시간 3시간 짜리 Footer를 10시간 넘게 잡고 있게 해준 'padding:2rem' ..... 잊지 않겠다...ㅠㅠ

hustle-ing