How to set a separator bigger than its container with CSS - html

Question

I have the following form with tailwind. I want the red separator to cover the full width of the outer container. So I would need it to start 24px before the left margin (that's the -ml-6) and to end 24px after (it should be 48px larger)
I know I could just let each section set its own horizontal padding (px-6), but I'd like to have a general padding for all the sections (that's the px-6) and the separators between sections to ignore that padding.
How can I achieve it?
// deal with the CDN warning
setTimeout(() => {console.clear()});
<div class="grid h-screen w-screen content-center justify-center">
<div class="grid w-80 gap-4 rounded-lg bg-slate-50 p-4 px-6 shadow-lg">
<div class="grid gap-2 bg-slate-200">
<div class="text-lg">Section 1</div>
<div class="text-sm">Item1 1</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 2</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 3</div>
</div>
<div class="-ml-6 mr-0 w-full border-t-2 border-red-400"></div>
<div class="grid gap-2 bg-slate-200">
<div class="text-lg">Section 2</div>
<div class="text-sm">Item1 1</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 2</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 3</div>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
Note: here you have the tailwind playground example

Answer 1

The problem is w-full (width:100%). You just have to remove that class (set width to the default "auto").
I think, when you specify the width:100% the parent padding is taken into account when calculating the width.
// deal with the CDN warning
setTimeout(() => {
console.clear()
});
<div class="grid h-screen w-screen content-center justify-center">
<div class="rounded-lg bg-slate-50 shadow-lg">
<div class="grid w-80 gap-4 rounded-lg bg-slate-50 p-4 px-6 shadow-lg">
<div class="grid gap-2 bg-slate-200">
<div class="text-lg">Section 1</div>
<div class="text-sm">Item1 1</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 2</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 3</div>
</div>
<div class="-mx-6 border-t-2 border-red-400"></div>
<div class="grid gap-2 bg-slate-200">
<div class="text-lg">Section 2</div>
<div class="text-sm">Item1 1</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 2</div>
<div class="w-full border-t"></div>
<div class="text-sm">Item1 3</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>

Answer 2

You've asked a bit of an XY question. Rather than hammering extra markup to size, just refactor so you can put your border on an existing element. You said you'd rather have just one padding class, but that requires you to have extra markup just for styling. That's not good practice.
Chances are you can do the same for your interior elements. You shouldn't need extra divs just for a line. Overall, your markup ends up much cleaner.
// deal with the CDN warning
setTimeout(() => {
console.clear()
});
border-t-2 border-red-400
<div class="grid h-screen w-screen content-center justify-center">
<div class="rounded-lg bg-slate-50 shadow-lg">
<div class="grid w-80 gap-4 ">
<div class="grid w-80 p-4 px-6">
<div class="grid gap-2 pb-2 bg-slate-200">
<div class="text-lg">Section 1</div>
<div class="text-sm">Item1 1</div>
<div class="text-sm pt-2 border-t border-gray-400">Item1 2</div>
<div class="text-sm pt-2 border-t border-gray-400">Item1 3</div>
</div>
</div>
</div>
<div class="grid w-80 border-t-2 border-red-400">
<div class="grid w-80 p-4 px-6">
<div class="grid gap-2 pb-2 bg-slate-200">
<div class="text-lg">Section 2</div>
<div class="text-sm">Item1 1</div>
<div class="text-sm pt-2 border-t border-gray-400">Item1 2</div>
<div class="text-sm pt-2 border-t border-gray-400">Item1 3</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>

Answer 3

The solution I found so far is to use -ml-6 to make the separator start 24 px before, and use calc to enlarge the width 48px, like this:
<div class="-ml-6 w-[calc(100%+48px)] border-t-2 border-red-400"></div>
see tailwind playground