Editing mini cart section

Hello,

On my staging site, I added the following CSS to make the mini cart section to look like this: https://snipboard.io/h3Wift.jpg

In GLOBAL custom CSS:

I used this css for padding:
body .elementor-element form.cart .variations {
width: 85% !important;
margin-bottom: 15px !important;

https://snipboard.io/pkeuFz.jpg

I used this css for button colours:
body .woocommerce-mini-cart__buttons .checkout {
background-color:#F65454;
}
body .woocommerce-mini-cart__buttons .checkout:hover{
background-color:#F65454;
}

https://snipboard.io/mQzqSU.jpg

However with the same CSS, my live site’s mini cart section looks different (like this: https://snipboard.io/bUz871.jpg)

Why is the CSS no longer working on my live site? How can I make the mini cart look like in my staging site?