I added my ul li's into a cell but it sticks to the left, want table to display in the center

Question

Would like to get this to rest in the center of the page but I haven't figured out how to do it. Any clues?

<div id="footerband">
    <div id="footer">
            <ul>
            <li>About</li>
            <li>Website by Michael Guerrero</li>
            <li class="spacer">Terms & Conditions</li>
            <li>KvK: 58274847</li>
            </ul>
        </div>
    </div>

Here's the css:

#footer {
    margin: 0 auto;
    display: table;
    height: 93px;
    width: 100%;
    text-align: center;
}

#footer li {
    display: table-cell;
    height: 93px;
    width: 16.666666667%;  /* (100 / numItems)% */
    line-height: 87px;
    text-align: center;
    white-space: nowrap;
} 

Answer 1

Try adding this to your CSS:

ul {
    width: 70%;
    margin: auto;
}

Answer 2

I added a border just to make each cell visible, but the actual change is to the display property...

#footer li {
    display: inline-block;
    height: 93px;
    width: 16.666666667%;  /* (100 / numItems)% */
    line-height: 87px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid silver;
}