Flickity carousel rendering too large and creating horizontal scrolling in Nuxt/Tailwind application

Question

I am using a carousel from Flickity in a Nuxt/Vue app styled with Tailwind. This carousel is in a 12 columns grid starting at the second columns and spanning 11 columns (ending on the right border of the screen). When I resize the screen I sometimes end up with a little bit of horizontal scrolling. I would like NOT to have this horizontal scrolling. Is there a way to do this ?

<template>
  <div class="grid grid-cols-12">
    <CarouselBase class="pl-95 col-start-2 col-span-11" >
        <ResourceCard
            v-for="(item, itemIndex) in items"
            :key="itemIndex"
            v-bind="item"
            class="mr-2"
        />
    </CarouselBase>
  </div>
</template>

Answer 1

Removing the padding (pl-95) fixed the horizontal scroll issue.