Simple Drawing Application - CSS Alignment Issue

I finished the course on creating a Simple Drawing Application with jQuery and I decided that for practice I would make some changes/improvements to the drawing app. My first idea was to add identical buttons next to the "New Color" option for selecting "Line Width" as well as a "Clear" button. I created an unordered list for the button menu but had an immediate formatting issue. The buttons were overlapping each other and no matter what I did with the CSS, I could not figure out how to fix it. I would like the buttons to be 3 in a row in a straight line underneath the canvas area. My code along with an image of the problem is below. Any tips on how I can modify the code to make this work?

[alt text](C:\Users\Rich\Pictures\DrawingAppIssue.png "Title")

Html is as follows

<ul id="optionMenu">
    <li><button id="revealColorSelect">New Color</button></li>
    <li><button id="revealLineSelect">Set Line Width</button></li>
</ul>

The CSS was written already but is all the applicable code

ul {
    list-style:none;
    margin: 0;
    float:  left;
    padding: 10px 0 20px;
    width: 100%;
    text-align: center;
}

ul li, #newColor {
    display:block;
    height: 54px;
    width: 54px;
    border-radius: 60px;
    cursor: pointer;
    border: 0;
    box-shadow: 0 3px 0 0 #222;
}

ul li {
    display: inline-block;
    margin: 0 5px 10px;
}

#optionMenu {

}

And some more CSS

button {
    background: #68B25B;
    box-shadow: 0 3px 0 0 #6A845F;
    color: #fff;
    outline: none;
    cursor: pointer;
    text-shadow: 0 1px #6A845F;
    display: block;
    font-size: 16px;
    line-height: 40px;
    margin: 10px;
}

#revealColorSelect {
    border: none;
    border-radius: 5px;
    margin: 10px auto;
    padding: 5px 20px;
    width: 160px;
}

#revealLineSelect {
    border: none;
    border-radius: 5px;
    margin: 10px auto;
    padding: 5px 20px;
    width: 160px;
}

Any help is appreciated. Thank you!