How can I correct this to make it look better?

Question

I'm trying to create a list of items that can be accessed when the menu is clicked on but im having trouble with the CSS. Ive managed to remove the bullet points but it leaves a massive gap between the border and the edge of the div. I would like to know if theres an easy way of centralising the table in the div, something that works like text-align or similar. I would prefer something that requires an automatic touch rather than just guess the width of pixels.

This is the CSS I've created so far :

.submenudiv{
    display:inline-block;
    /*height:170px;
    width:120px;*/
    background-color: grey;
    /*border: 2px black solid;*/
    margin: auto;
    /*margin-top: 50px;*/
    padding: 5px;

    text-align: center;
}
.submenudiv: hover{
    background-color:blue;
}
.list{
    list-style-type: none;
    /*margin-left: -40px;
    margin-top:3px;*/
    border: 2px solid black;
    padding: 5px;
    text-align: left;

}
.list:hover{
    background-color:blue;
    color:white;
}

The JS code to this is :

var list = function () {
    var creatDiv = document.createElement("div");
    creatDiv.id = "submenudiv";
    creatDiv.className = "submenudiv";

    var creatul = document.createElement("ul");
    for(index = 0; index < 5; ++index){
        li = document.createElement("li");
        li.className = "list";
        li.innerHTML = "Submenu" + index;
        creatul.appendChild(li);
    }

    creatDiv.appendChild(creatul);
    document.body.appendChild(creatDiv);
};



creatbtndiv.onclick = function () {
    var alert = confirm("yes master");
    list();
};

Just click on "Click Me", confirm the command to proceed and a table should show up.

Appreciate the help.

Answer 1

remove gap

ul {
    margin:0;
    padding:0;
}

center table

.divContainer{
    text-align:center;
}
table {
    margin:0 auto;
}