How to center the text in?

Question

I try to have an equal distance between four different elements li, but in the end I get the following:

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 tested CSS and it works as it should. I think the problem is that linot everyone has the same number of letters, so you get some weird visual effects. My reason for this is:

(Equal distance)

Answer 1

My approach with this problem is to center li on ul, since ul will naturally be the same as 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 how it works.

Answer 2

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

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