Price Plan Not Showing Correctly

Thanks Eric, I added the !important bit to some places and now it looks better than what it did.

For some reason the price plans are all still grouped to the left though with a space on the right. As if they are not resizing to the width that they can be.

Is there a way to get them to resize to fit the page?

Thank you very much for your help. I know you are helping out even though it’s not your product and that’s great of you. It’s very much appreciated.

I’m very glad to say that I got it right! Some time away from the computer helped a lot.

For people who want to do something similar in the future:

I added some css code for three columns and changed the existing one to four columns:

.plan-col-four, 
.plan-col-popular-four {		
	width: 25%;
}

.plan-col-three, 
.plan-col-popular-three {		
	width: 33%;
}

Then in code if I want to use three columns I would do the following:

<div class="plans">
<div class="plan-col plan-col-three">
	<div class="plan-col-wrap">
		<div class="plan-head"><h4>Simple</h4></div>
		<div class="plan-pricing">
			<span class="plan-price"><sup>$</sup>45</span><span class="monthly">/mo</span>
		</div>
		<ul class="plan-list">
			<li><strong>100</strong> Themes</li>
			<li><strong>Unlimited</strong> Bandwidth</li>
			<li><strong>300</strong> E-mail Accounts</li>
			<li><strong>Free</strong> 1-800 Number</li>
			<li><strong>5 Free</strong>Domains</li>
			<li><strong>Unlimited</strong> Downloads</li>
		</ul>
		<div class="plan-button"><a>Buy Now</a></div>
	</div>
</div>	
	
<div class="plan-col-popular plan-col-popular-three">
	<div class="plan-col-wrap">
		<div class="plan-head"><h4>Popular</h4></div>
		<div class="plan-pricing">
			<span class="plan-price"><sup>$</sup>59</span><span class="monthly">/mo</span>
		</div>
		<ul class="plan-list">
			<li><strong>200</strong> Themes</li>
			<li><strong>Unlimited</strong> Bandwidth</li>
			<li><strong>300</strong> E-mail Accounts</li>
			<li><strong>Free</strong> 1-800 Number</li>
			<li><strong>5 Free</strong>Domains</li>
			<li><strong>Unlimited</strong> Downloads</li>
		</ul>
		<div class="plan-button"><a>Buy Now</a></div>
	</div>
</div>

<div class="plan-col plan-col-three">
	<div class="plan-col-wrap">
		<div class="plan-head"><h4>Great</h4></div>
		<div class="plan-pricing">
			<span class="plan-price"><sup>$</sup>99</span><span class="monthly">/mo</span>
		</div>
		<ul class="plan-list">
			<li><strong>300</strong> Themes</li>
			<li><strong>Unlimited</strong> Bandwidth</li>
			<li><strong>300</strong> E-mail Accounts</li>
			<li><strong>Free</strong> 1-800 Number</li>
			<li><strong>10 Free</strong>Domains</li>
			<li><strong>Unlimited</strong> Downloads</li>
		</ul>
		<div class="plan-button"><a>Buy Now</a></div>
	</div>
</div>

</div>
<!--formatted-->

One can then do something similar for two columns and so forth.

Hi Eric,

The strange thing is that it was between tags. I must have done something wrong. Unfortunately it's not possible to preview before posting or to edit a post afterwards. Luckily someone fixed it now.

Ah alright. Thanks Eric. I will check next time.