Alignment issues on website

Hi ~ The form I created looks great on the Jot Form Site... Yet it is badly misaligned on the website.  

Here is the link to the live page which I was trying to correct.

http://gbfg.org/clean-up-volunteer-registration/

Here is a link to the preview where I am attempting to solve the problem:  http://gbfg.org/clean-up-volunteer-registration/?preview=true&preview_id=1135&preview_nonce=8b953edabe

I have attempted various form widths, etc. with no success. I am attaching a partial screen shot which shows the name and phone number fields issues.

Please let me know what other information you might need.

THANKS ~ L

I looked at your page but unfortunately I'm not quite understanding the issue at hand other than the fact that you stated it's not how you want it. Also, I'm unable to view the preview link of the issue you've shared.

Are you able to provide us with a different link or make it so we can access that one to see what's going on better?

Thanks for your prompt response.  The issue is that the fields for first and last name, as well as the area code and phone number appear on separate lines.   Here is the current live link... I added a disclaimer to our users until I figure it out.

I also I took off the *required fields because they, too were misaligned.

http://gbfg.org/clean-up-volunteer-registration/

It looks fine on the Facebook tab. :)

THANKS ~ L

UPDATE: I used the Wordpress PlugIn and had better results.  THANKS!

http://gbfg.org/clean-up-volunteer-registration/