JSFiddle - React, Tailwind, and code Playground

HTML

<b>Few links</b>
<div id="navigation">
    <ul>         
        <li><a href="/home">Home</a></li>
        <li><a href="/news">News</a></li>
    </ul> 
</div>

<div style="margin-top:100px;">
    <b>Many Links</b><br />
Result:
<div id="navigation">
    <ul>         
        <li><a href="/home">Home</a></li>
        <li><a href="/news">News</a></li>
        <li><a href="/news">News</a></li>
        <li><a href="/news">News</a></li>
    </ul>
</div>
</div>

<div style="margin-top:100px;">
What I want:
<div id="navigation">
    <ul>         
        <li style="margin-left:20px"><a href="/home">Home</a></li>
        <li style="margin-left:20px"><a href="/news">News</a></li>
        <li style="margin-left:20px"><a href="/news">News</a></li>
        <li style="margin-left:20px"><a href="/news">News</a></li>
    </ul>
</div>
</div>

CSS

div#navigation {
    width:400px;
    height:40px;
    padding:10px;
    margin:0px auto -30px auto;
    background:#ff8a00;
}

div#navigation ul {
    list-style-type:none;
    height:30px;
    text-align:center;
}

div#navigation ul li {
    display:inline-block;
    margin-left:50px;
}

div#navigation ul li:first-child {
    display:inline-block;
    margin-left:0px;
}

div#navigation ul li a {
    color:#FFF;
    font-size:26px;
    text-decoration:none;
}