Add to Cart button appears below quantities on mobile

Dear Zakra Team,

The Add to Cart button is below the quantity selector when shopping on my website on mobile. Could you please provide me with a custom css code so that the Add to Cart button appears right next to it on mobile?

The Add to Cart button should have the width of 100% on mobile.

I have used the following code to make the width to 100% on mobile for the Add to Cart Button however the Add to Cart button appears on mobile below the quantity selector and I dont know why.

@media screen and (max-width: 768px)
.woocommerce div.product form.cart .button {
vertical-align: middle;
float: left !important;
height: 3.5em;
width: 100% !important;
}

Please have a look at the screenshot to see the problem.

https://ibb.co/Lzkbq0Q

Thank you very much for your help.

Kind regards

Markus