Question Editor to live view mismatch - Woocommerce Pages

[neilw]

Hey there,

I'm new to using Elementor and have had a great time putting together the skeleton to the site i'm making for myself.

I have just started to put together the product page templates and i've noticed there's discrepancies when viewing via the editor, and then viewing the live version on one part im doing, and it's gotten quite frustrating. This doesn't seem to have happened with the regular pages i've built so far.

I've added the "add to basket" and "price" widgets on a 2 column inner widget, and when it pulls the price, it's coming in slightly above the line of the buttons (so not straight). I have used margins in advanced to compensate for this, but then when i push it live it looks wonky. I then moved the margins around to make it look ok live, but natually it's looking wrong in the editor now.

Am i doing something wrong here, or is there a way to compensate another way than using the margin in advanced? It feels a bit counter intuitive to make my edit look wrong for the live version to look right.

I have attached images of the edit Vs live that achieves it looking correct live.

Thanks

Neil