Add to cart button width

Site URL: https://www.maartenrots.nl/patron

To offer customers the possibility to sign up for a subscription with creditcard as well as with PayPal (Squarespace doesn't support PayPal for recurring payments...) I've come up with the solution to use two separate buttons below a block of text. One button is a regular button, this one links to PayPal. The other one is a product block set to display the button only. My problem is that I can't figure out how to make the add-to-cart button span the container, like the regular button does after playing around with some CSS, just for this particular page (#patron-plans).

On desktop everything looks fine, I have manually made the size of the add-to-card button to more or less the same width as the block above it. But when you switch to tablet or mobile view the button size changes, where the regular button nicely follows the width of the block above.

I would really appreciate your input and/or solutions to make this work, thanks a lot in advance.

Here's the CSS I have used (applied to #paypal-plans only):

/* Patron Creditcard Button Styling */
.sqs-add-to-cart-button{
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 2em;
	border-width: 0px;
  	background-color: #77A2AC;
	color: #fff;
} 
  
.sqs-add-to-cart-button:hover{
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 2em;
	border-width: 0px;
	background-color: #D8E8E9;
	color:#545454;
} 

.sqs-add-to-cart-button-inner {
	padding-left: 10px;
	padding-right: 10px;
}
  
/* Patron Paypal Button Styling */
  
.form-block .lightbox-handle {
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 2em;
	border-width: 0px;
	width: 100%;
	color: #fff;
	background-color: #9FC7CD;
}
  
.form-block .lightbox-handle:hover {
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 2em;
	border-width: 0px;
	width: 100%;
	color: #fff;
	background-color: #D8E8E9;
	color:#545454;
}

Add to Home > Design > Custom CSS

@media screen and (max-width:900px) {
section#patron-plans .sqs-add-to-cart-button {
    width: 100%;
    overflow: hidden;
}
/* button overlap right edge */
#patron-plans .product-block {
    overflow: hidden;
}
}

Thanks, that works like a charm! (and thank you for your fast reply!)

The only thing I'd like to change is to have the text inside that button to be centered, do you have an idea for that as well?

edit this

section#patron-plans .sqs-add-to-cart-button {
    width: 100%;
    overflow: hidden;
    padding-left: 0 !important;
}

Thank you very much, I would never have figured that out myself. Hope this will be of help to others as well.