Trying to center UL

Question

I am trying to properly center a UL. Even though I used display:table and the correct margin: 0 auto... still it doesn't work properly. It doesn't go the center.

What am I doing wrong?

CSS for the UL and the LI

.container { 
    position: relative; 
    display:table; 
    margin-left:auto;
    margin-right:auto;
}


.container li {
    margin: 30px 30px;
    padding: 0;
    display: inline;
    clear: none;
    float: left;
    width: 310px;
    height: 370px;
    position: relative;
    list-style: none;
}

Here is the LIVE version. When adjusting the page you will notice that the UL is docked to the left side of the page.

UPDATED http://codepen.io/mariomez/pen/doJvJz?editors=010

Notes: the problem is almost resolved. The only issue is that the LI components are also center aligned which is not visually good for me. How can I align them to the left and keep the UL centered?

Answer 1

Position the .container with text-align: center;, disable floating the list elements and use display: inline-block; instead of display: inline; for them:

.container {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    text-align: center;
}


.container li {
    margin: 30px 30px;
    padding: 0;
    display: inline-block;
    clear: none;
    width: 310px;
    height: 370px;
    position: relative;
    list-style: none;
}

Demo: JSFiddle