Al T.

Какая-то дичь с padding и margin, на лицо полное непонимание, что вы делаете, советую выучите flexbox и будет вам счастье.
Например, можете это сделать здесь в игровой форме (новички в восторге).

Для последней версии TailwindCSS (на момент поста 4.0), т.к. не вижу смысла работать со старьём.
// main.css

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Далее устанавливаем vueUse с npm.
// App.vue

import { useDark } from '@vueuse/core'

const isDark = useDark()

<template>
  <div>
    <input v-model="isDark" type="checkbox" /> Dark mode
  </div>
</template>

з.ы. Попробуйте так, у меня работает.

Как вариант предложу сделать доп. обёртку (".inner" внутри ".container")

<div class="container">
  <div class="inner">
    <div class="element">123</div>
    <div class="element">456</div>
    <div class="element">789</div>
  </div>
</div>

Далее в CSS мы делаем боковые margin элементам и отрицательные margin div-обёртке (таким образом лишние margin'ы по бокам "провалятся" в отрицательные margin'ы родительского div-обёртки).

.inner {
  margin: 0 -20px;
}
.element {
  margin: 0 20px;
}