작정하고 장고 - 41

작정하고 장고 41강의 Project에 article을 MultipleObjectMixin을 통해서 보여주게 하는 과정에서 보여주는 것까진 했는데 리스트가 이상하게 나왔다.

매직그리드가 이상하게 일해서 가운데로 정렬이 안 되고 오른쪽으로 쏠린 것 같은데 뭐가 문제인지 도저히 모르겠다.
개발자모드에서 a태그 상위에 있는 div 태그 범위를 확인하면 정상적으로 나오는데 그 범위를 벗어나서 그려지고 있다.
매직그리드 주석처리하면 가운데 정렬로 나오긴 하지만 그냥 1자로 출력돼서 내부를 살펴봤다.

여기서 container나 static을 주석처리하면 가운데 정렬로 보이고 매직그리드 효과는 사라지게 하는데 어떻게 해결할 지 모르겠다.
그냥 article에서는 정상적으로 나오는데 쟤만 이상하다.

출력 확인하기

콘솔로그 일일이 찍어보니까 시작이 0px로 들어갔는데 이상하게 그려지던 것이었다. 그러면 시작점이 이상하게 설정되어 있는 건데 뭔지 모르겠다.

기존에 제일 위에 있던 div의 클래스를 지우고 바로 밑의 div에 스타일을 따로 넣어주니까 해결이 됐다. 클래스 때문인가 싶어서 밑에도 스타일 주고 상위 div에 다시 클래스 넣어주니까 같은 문제가 반복됐다.
제일 위의 div에서 text-align: center 속성이 있어서 생긴 문제였다. center 속성 때문에 0px의 시작점이 이동돼서 생긴 문제인 것 같다.