Is the theme preventing this from viewing correctly?

Hi Kriesi team!

I’m in the process of replacing an ugly and loadtime-hogging pricing table on my site.

I have the html and CSS style code (see below). I created a code box with the advanced page editor on my test page and threw this in. The table looks great on various wysiwyg editors and the site I got it from, however, when I load this into my page, it’s all wonky. I’m using Enfold Child theme.
Pic 1 is how it is supposed to look.
https://picasaweb.google.com/lh/photo/qja1UzocOA6bs6xiOp7CrkXEwIN14nHUiOmhoBiRzDk?feat=directlink
Pic 2 is how it looks on my test page.
https://picasaweb.google.com/lh/photo/27aaSWHSAzJQNX1a6P7wNEXEwIN14nHUiOmhoBiRzDk?feat=directlink

https://rallyforlocal.com/test

Am I doing something wrong? Is it the theme that is wonking things out (namely in the header colors, price size, margins and offset inside the borders)? If yes, can you please advise?

Here’s the code I used:

<div id="pricing-table" class="pricing-table">

                            <ul>
                                <li class="heading">Basic</li>
                                <li class="price">Free</li>
                                <li>-</li>
                                <li>Basic Business Hours </li><li>1 Category </li><li> Short Business Description (250 Characters)</li><li>1 Photo </li><li> Tags (40 Characters)</li><li> 1 Website/Shop Link</li><li> 1 Social Media Link</li><li> - </li><li> - </li><li> - </li><li> - </li><li> - </li><li> - </li><li> - </li><li> - </li><li> - </li><li> - </li>
                                <li class="action"><a href="https://rallyforlocal.com/add-listing/?listing_type=gd_place&package_id=1">Sign Up Now</a></li>
                            </ul>

                            <ul>
                                <li class="heading">Patron</li>
                                <li class="price">$9.95</li>
                                <li>(per month)</li>
                                <li>Basic Business Hours</li><li> 2 Categories</li><li>Med. Business Description (1000 Characters)</li><li> 10 Photos</li><li>Tags (100 Characters) </li><li> 2 Website/Shop Links</li><li> 4 Social Media Links</li><li> - </li><li> - </li><li> - </li><li> - </li><li> - </li><li> - </li><li>Linked Events </li><li>Promotional Materials</li><li> Light Social Marketing</li><li> - </li>
                                <li class="action"><a href="https://rallyforlocal.com/add-listing/?listing_type=gd_place&package_id=7">Sign Up Now</a></li>
                            </ul>
                        <ul class="feature"><li class="heading"> Local Hero</li><li class="price"> $19.95</li><li>(per month) </li><li> Enhanced Business Hours</li><li> 4 Categories</li><li>Lengthy Business Description (Unlimited)</li><li> 40 Photos</li><li>Tags (300 Characters)</li><li>4 Website/Shop Links </li><li>10 Social Media Links </li><li> Featured Listings</li><li>Detailed Amenities</li><li> Upload Catalogs & Menus</li><li>Embed YouTube Videos </li><li>Create Printable Coupons </li><li>Front Page Logo Scroll </li><li> Linked Events</li><li>Promotional Materials </li><li>Robust Social Marketing</li><li>Blog Post </li><li class="action"><a href="https://rallyforlocal.com/add-listing/?listing_type=gd_place&package_id=8">Sign Up Now</a></li></ul><ul><li class="heading">Civic Leader </li><li class="price">Free </li><li>(Nonprofits & Clubs Only) </li><li>Basic Business Hours </li><li> 2 Categories</li><li>Lengthy Nonprofit/Club Description (Unlimited)</li><li> 20 Photos</li><li> Tags (100 Characters)</li><li>1 Website/Shop Link</li><li>10 Social Media Links </li><li> - </li><li> - </li><li> Upload Brochures/Docs</li><li>Embed YouTube Videos </li><li> - </li><li> - </li><li>Linked Events</li><li>Promotional Materials </li><li>Robust Social Marketing</li><li> Blog Post</li><li class="action"><a href="//rallyforlocal.com/add-listing/?listing_type=gd_nonprofits">Sign Up Now</a></li></ul>

<link href="http://fonts.googleapis.com/css?family=Abel" id="google-font-selector" rel="stylesheet" type="text/css"></div>

<style>
.pricing-table ul{ 
    border-width: 1px; 
    border-style: solid; 
    border-color: #CCCCCC; 
    border-radius: 3px; 
    margin: 3px; 
    width: 220px; 
    text-align: center; 
    list-style: none; 
    float: left; 
    padding: 5px; 
    background-color: #FFFFFF; 
} 
.pricing-table ul li{ 
    padding: 4px; 
    background-color: #EFEFEF; 
    border-width: 2px; 
    border-color: #B83737; 
    border-radius: 0px; 
    border-bottom-width: 2px; 
    font-size: 14px; 
} 
.pricing-table li:nth-child(odd){ 
    background-color: #F7F7F7; 
} 
.pricing-table ul .heading{ 
    color: #F68F29; 
    font-size: 28px; 
    background: #58585A; 
    background: -moz-linear-gradient(top, #58585A 0%, #58585A 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#58585A), color-stop(100%,#58585A)); 
    background: -webkit-linear-gradient(top, #58585A 0%,#58585A 100%); 
    background: -o-linear-gradient(top, #58585A 0%,#58585A 100%); 
    background: -ms-linear-gradient(top, #58585A 0%,#58585A 100%); 
    background: linear-gradient(to bottom, #58585A 0%,#58585A 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58585A',  endColorstr='#58585A', GradientType=0 ); 
} 
.pricing-table ul .price{ 
    color: #FFFFFF; 
    background-color: #58585A; 
    font-size: 40px; 
} 
.pricing-table ul .action{ 
    font-size: 14px; 
    color: #2A6496; 
} 
.feature{ 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
    box-shadow: 3px 5px 7px rgba(0,0,0,.7); 
} 
.pricing-table .action a{ 
    border-color: #F68029; 
    border-width: 0px; 
    border-radius: 14px; 
    background-color: #F68029; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    padding-left: 16px; 
    padding-right: 16px; 
    border-style: solid; 
    color: #FFFFFF; 
} 
</style>

Thanks so much! I truly appreciate your time and expert advice!
Cheers, Kris