CSS: 패딩 때문에 컨텐츠가 외곽에서 뜰 때

	.card-list {
		display: flex;
		flex-wrap: wrap;
	}
	.card-item {
		width: 50%;
		padding: 0 1rem;
	}

위의 코드를 이용해서 카드 컨텐츠 사이에 간격을 주기위해 padding을 주면,
외곽에도 padding이 적용되어 컨텐츠가 화면 끝까지꽉 차지 않는 모습이다

 

---

그럴때 부모 속성에 margin -1 을 적용하여 간단히 해결할 수 있다

	.card-list {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -1rem;
	}
	.card-item {
		width: 50%;
		padding: 0 1rem;
	}