css | 부모의 너비를 무시하고 자식의 요소를 화면 전체 너비로 설정하기

PC 버전을 구현할 때, 메인의 너비를 1024px로 설정하고 margin:0 auto; 를 사용하여 가운데 정렬하여 작업을 하는 도중, 

메인 콘텐츠의 중간 요소의 너비를 화면 전체로 구현하고 싶었습니다. 

 

 

.넓히고자하는요소 {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

해결법은 간단했으며, 전체 풀로 채우고자 하는 요소에만 css를 추가하면 됩니다.

 

 

결과화면

---

https://www.milindsoorya.com/blog/css-to-ignore-parent-padding