Need help with customizing the display of Plans and the "Next" button location

We need to do a little restyling of the location of the PLANS and the location of the NEXT button.
Our one plan displays on the left of the page while the "Next" button displays all the way to the right and users don't see it.
We'd like to have the plan display centered and the Next Button display centered under it. See attached for detail (at bottom of image).  Can  you help me figure out how to achieve this result?

Thanks in advance for your help, much appreciated!

You should be able to do that entirely with CSS. Those buttons have the following CSS classes.

Container: cbTabsStepByStepNav
Previous Container: cbStepByStepLeft
Previous Button: cbTabNavPrevious
Next Container: cbStepByStepRight
Next Button: cbTabNavNext

These currently are just a flex row. With cbStepByStepLeft and cbStepByStepRight consuming 50% width. The below CSS would change this to auto.

Note I did not test the above and is just an example so you may need to adjust it. You can apply custom CSS to CB using the built in CSS override feature shown below.

www.joomlapolis.com/blog/kyle/18711-template-css-overrides-made-easy

Another trick is you can actually put previous/next buttons within your CB fields themselves. So for example a Custom HTML field. All you need to do is have a button with the Previous Button or Next Button CSS classes above on it and it'll navigate accordingly.

With that said I think your main issue is your plan itself. You're using the rounded display, but you're not applying any width to it with a large description so it's quite squashed. I would recommend applying some width to your plan using CSS so it fits better.

Thank you Krileon, this was very helpful.
I've been able to style the plan presentation OK using the browser inspect but am havaing a problem getting the CSS I developed to show up. I added the code to the DEFAULT Template from the Plugin Management menu in the "Overrides" tab. See the attached file to see where I added it and the code.

I've cleared the Cache on the site and on the browser but the display defaults to the original CSS. Looking at the location of the css shown ont the "override.css:1" shows a file location "
/com_comprofiler/plugin/user/plug_cbpaidsubscriptions/templates/rounded/override.css?v=413702ff79947d18"

This makes me think I am missing some crucial point and am putting the CSS override code in the wrong place.

Would I be crazy to ask if you could help me get this working?

Thanking you in advance for your help,

Chris