add to cart not centered

hi team, on a shop page we have a snippet in place which ads the "add to cart" function. in desktop anything fine, but in mobile the "quantity.buttons-added" is not centered. screenshot attached. any idea?

following css is in place:

/*menge direkt auf der shop seite eingeben - zentrieren */
.quantity.buttons-added {
display: flex;
justify-content: center;
align-items: center;
}

snippet:

/**
* Bestellmenge auf der WooCommerce Archivseite
*/
add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
$html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
$html .= woocommerce_quantity_input( array(), $product, false );
$html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
$html .= '</form>';
}
return $html;
}