Nuxt/Vuetify Overwriting variables in variables.scss

I'm trying to make my nuxt/vuetify website have the same container size for both lg and xl (i.e it still has the gap at each size in XL.

I Have tried overwriting my variables.scss with this:

@import '~vuetify/src/styles/styles.sass';

$container-max-widths: map-deep-merge(
  (
    'md': map-get($grid-breakpoints, 'md') * 0.9375,
    'lg': map-get($grid-breakpoints, 'lg') * 0.9375,
    'xl': map-get($grid-breakpoints, 'lg') * 0.9375,
  ),
  $container-max-widths
);

But I am still not having any luck, does anyone know what I need to do?

In my nuxt config it does import the variables.scss file:

vuetify: {
    customVariables: ['~/assets/variables.scss']
}

Thanks for your help in advance :-)