How to center text in li?

Question

I am trying to have equal spacing between four different li elements, but I end up with this:

HTML:

<ul><li>Inbox</li></li><li>Drafts</li></li><li>Sent</li></li><li>Trash</li></ul>

CSS:

ul li { 
     width: 25%;
     display: inline-block;
     text-align: center;
}

I have tested the CSS and it is working as it should. I think the problem is that the li's don't all have the same amount of letters, so you end up with some weird visual effects. My reason for believing this:

(Equal spacing)

Answer 1

Try this

ul {
    width:100%;
    margin-left: 0;
    margin-bottom: 0
} 

li { 
     list-style-type: none;
    display: inline-block;
    margin-right: 20px;
}

Answer 2

My approach with this issue is to center the li on the ul since the ul will naturally be the same width than the parent.

ul {
    /* Use flex boxes to align li items */
    display: flex;
    justify-content: space-around;
    /* Remove default padding from major browsers */
    padding: 0;
    /* Hide the default decorations for li items */
    list-style: none;
}
ul > li {
    /* Display the elements in one line */
    display: inline-block;
}

Check out this JSFiddle to see it working.