Is it possible to have a container with liquid width and 20px of padding in CSS, where most contained elements respect the padding but a few ignore it and are the same width as the container itself?
I am aware that I could use margins on the contained elements instead, but due to the complexity of my HTML structure, this is not ideal.
<div class="cont">
<div class="item-normal">Normal Item</div>
<div class="item-wide">wide Item</div>
<div class="item-normal">Normal Item</div>
<div class="item-wide">wide Item</div>
<div class="item-normal">Normal Item</div>
</div>
body {
padding: 0;
margin: 0;
}
.cont {
background: grey;
padding: 20px;
}
.item-normal {
background: blue;
margin-bottom: 10px;
}
.item-wide {
margin-left: -20px;
background: gold;
margin-bottom: 10px;
}