Widget Button Formatting Issues: Text Wrap & Alignment

Site URL: http://samekindofdifferentasmefoundation.org/donate-1

I'm having trouble with integrating a widget from a third-party app. 
The integration allows for users to click on a button and then opens a dialogue box to make a purchase or donation. 

Here is what I'm trying to achieve

1. A large button the spans 75%-100% of the container
2. The button responding to screen size and text wrap when appropriate
3. Button staying centered
4. Text staying vertically centered in the button

The code I have from the third party website is...

<div style="background:#ffffff; border-radius:0px 0px 0px 0px;font-weight:bold; font-family:Tahoma, Geneva, sans-serif;border:3px solid #ff5722;box-shadow:none;left: 50%; margin-left: -500px;display: block;clear: both; width:1000px; height:70px; line-height:2.9; position:relative; cursor:pointer;font-size:24px; text-align:center;color:#ff5722;text-decoration: none; z-index:1;" onclick="open_window('Nzg4ODA=','www.flipcause.com')">DONATE $30 GET AN AUTOGRAPHED COPY OF WORKIN’ OUR WAY HOME</div>

Brandon - - this worked beautifully. Really appreciate the help!

Great, glad I could help!

Hi @brandonmcconnell

I'm having issues with button alignment on the home page under the section "How I Can Help You." I'd love for the buttons to be aligned even though the text is not the same length. I'm currently using spaces but when it's on mobile, it looks off as well. I was wondering if you could help me out with this? Really appreciate it - thanks!

website: www.energcoach.com

pw: energ