How to override inline styles using CSS?

Question

I'm trying to override an inline style set by a 3rd party API, the element in question

<li class="BrainhubCarouselItem BrainhubCarouselItem--active" 
style="padding-right: 25px; padding-left: 25px; width: 225px; 
max-width: 225px; min-width: 225px;"/>

I have tried selecting the element like so

li.BrainHubCarouselItem.BrainHubCarouselItem--active {
  padding-left: 3px !important;
  padding-right: 3px !important;
  width: 100px !important;
  min-width: 100px !important;
}

However none of the styling is taking place

Answer 1

Change BrainHubCarouselItem to BrainhubCarouselItem (H to h)

li.BrainhubCarouselItem.BrainHubCarouselItem--active { .... }

So your css would look like this

li.BrainhubCarouselItem.BrainhubCarouselItem--active {
  padding-left: 3px !important;
  padding-right: 3px !important;
  width: 100px !important;
  min-width: 100px !important;
}