Mindbody - Buy Now Button Not Working

Hi, I'm working on a Pricing Page and I have to use Mindbody pricing widgets in the code block. It works okay on the desktop view, but in the mobile view the text box and code box extend far, and/or all of the buttons are not in the correct place.

I'm not sure how to stop this from happening. Or how to keep the text and code boxes static/fixed in one spot. I attached a pic of what it looks like while I'm editing it in the desktop view. I have a text box with the pricing information, and then I overlay a code block that is the "buy now" button.

I used the following code in Custom CSS to create the style of the buy now button.

/*style "LOGIN | REGISTER" MINDBODY link to look like button*/
a.loginRegister {
color: #000000 !important;
border: solid 1px #000000;
background: #FE6B41;
border-radius: 50px;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 35px;
padding-left: 35px;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
}
/*style "BUY NOW" MINDBODY links to look like button*/
a.healcode-pricing-option-text-link {
color: #000000 !important;
border: solid 1px #000000;
background: #FE6B41;
border-radius: 50px;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 35px;
padding-left: 35px;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
}
/*style "CONTRACTS" MINDBODY links to look like button*/
a.healcode-contract-text-link {
color: #000000 !important;
border: solid 1px #000000;
background: #FE6B41;
border-radius: 50px;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 35px;
padding-left: 35px;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
}
/*style "GIFT CARD" MINDBODY links to look like button*/
a.healcode-gift-card-text-link {
color: #000000 !important;
border: solid 1px #000000;
background: #FE6B41;
border-radius: 50px;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 35px;
padding-left: 35px;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-block;
}

.sqs-col-6 {border: 5px solid #50bdb8; width:40%!important; margin-left: 7%} @media only screen and (max-width:768px){ .sqs-col-6 {margin-left:0%!important; margin-bottom: 5%}}

the page is at https://flounder-clarinet-4shm.squarespace.com/buy

thank you, I added the code, and I think it's good now!