아직도 해결을 못하셨나봐요.. 고생이 많으시네요ㅜㅜ

때때로 코드가 많다 보면 헷갈리기도 합니다. 구조는 간단한것 같은데... 우선 기본틀을 하나 만드셔서 테스트를 하신 후 중앙정렬이 똑바로 되는지 확인하시고 각각에 맞는 세부 항목들을 넣어보시는건 어떨까요?

<div style="width: 100%; overflow: hidden">
     <div style="margin: 0 auto; width: 1200px; height: 100px; background: red">헤더</div>
</div>
<div style="width: 100%; overflow: hidden">
     <div style="margin: 0 auto; width: 1200px; height: 100px; background: blue">슬라이더</div>
</div>
<div style="width: 100%; overflow: hidden">
     <div style="margin: 0 auto; width: 1200px; height: 100px; background: green">최근글 위젯들</div>
</div>
<div style="width: 100%; overflow: hidden">
     <div style="margin: 0 auto; width: 1200px; height: 100px; background: purple">푸터</div>
</div>

현재 틀이 똑바로 정렬이 되는것을 확인하시고.. 브라우저의 가로크기를 조절했을때 컬러박스들이 센터에 유지 돼야 합니다.

이후 그 안에 코드들을 넣으셨는데 틀어지면 그건 그 안에 들어 있는 코드에 문제가 한정되는 겁니다. 이런식으로 해결해 보시면 어떠실런지요.. 참고로 현재 슬라이더 부분 조정하신건 1920 크기에서 볼때만 센터지 센터 정렬이 되신건 아닌것 같습니다.

css에서 body쪽에 넓이 넣으신 다음

이미 위젯설정에서 넓이가 잡혀 있는 부분을 새로 잡아둔 넓이에 들어가게 설정을 다시 하시면 됩니다.

중간에 불러오는 왼쪽 첫번째 위젯 넓이가 620정도니까 1240으로 넓이를 잡으시던 아니면 아무거나 잡으셔서

불러오는 위젯 넓이 설정을 다시 하시면 될겁니다.