problem centering a css button inside of a toggle / accordian shortcode

Hello,

I have built a custom button using css and it is displayed inside of an accordian using the theme’s shortcodes. for some reason, I cannot horizontally center the button and wonder if there is a conflict I can’t detect.

here is the code in the HTML editor:

[av_toggle_container initial='0' mode='accordian' sort='']

[av_toggle title='Individual / Residential Membership' tags='']

<p style="text-align: center;">This membership is perfect for local residents not representing any particular organization, but looking for a formal connection to the New Tampa business community.</p>

<a class="jb" id="jb" title="Join the New Tampa Chamber of Commerce" href="http://#/">Join The Chamber </a>

[/av_toggle]

and here is my CSS:

#jb {

border-radius: 3px;

padding: 10px;

width: 18%;

text-align: center;

text-transform: uppercase;

font-size: 14px;

color: #ffffff;

}



.jb {background: #52ac43;

margin: 0 auto 0 auto;}



.jb:hover {background: #52ac43;opacity: 0.8;}

here is the link to the page where I am testing it: http://mindsparkconsulting.com/clients/test2/membership/ntcc-levels/

am I missing something? I want this button centered.

thanks