Centering a div, WITHIN a div inside a div - Any advice?

Question

I know it's not that much of programming, more of a coding. I'm facing a theoretically simple to solve problem :

Project: A multi-purpose nice looking set of pricing tables

Problem: How to center a group of 3 pricing tables inside the browser's window.

Solutions that I've tried: "margin: 0 auto" on .main class and .container class

Below is the link to download a piece of code and a graphical explanation of the goal that I want to achieve. I would be extremely thanful for any help in resolving this issue. Cheers !

Link to the index.html and css folder + Graphical explanation of the problem : https://www.dropbox.com/sh/tlcld7k6lfhmb3w/YMJ3_5MR6I

Answer 1

The answer is pretty easy: Your .center class IS centred. But your price-tables have a width of 25% - that means as long as you have only three container with that class there will be a space with the width of 25% on the right hand side.

Solution: Eather add a fourth price-option or set the width of .cp-column to 33% ;)

Now it looks like:

.center {
 margin-left: auto;
 margin-right: auto;
}
.cp-column {
 width: 25%;
 float: left;
}

Change that to

.center {
 margin-left: auto;
 margin-right: auto;
}
.cp-column {
 width: 33%;
 float: left;
}

Answer 2

DEMO

margin: 0 auto; should work fine check the demo. You might have forgot to restrict the width of div.

It doesn't matter if you are using margin auto technique in a div within a div as long as parent div's covers the entire width.