Swatches not aligned in the shop page and in the slider

Hi, I’m new to WordPress in general and I added the swatches pro to get the options in shop page and in the archive page but the alignment is so bad I tried to fix it and I could align it in a row if you went into the shop and clicked in Yeezy you could see what I mean.

the other problem is that the slider has the options messed up also and I don’t know how to fix them

after reading some threads it might be an error with the theme but I couldn’t figure anything out. So if anyone would like to help either with a CSS code or with any way it would be great

Thanks

this is the website: https://www.soldout.website

this is the css code i tried to fix : .woo-variation-swatches.rtl .variable-items-wrapper .variable-item:not(.radio-variable-item) {
margin: 5px 100px 1px 55px;
}

The page I need help with: [log in to see the link]