JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="mainMenu">
    <li><a href="">Цены</a></li>
    <li><a href="">Заказать</a></li>
    <li><a href="">Услуги</a></li>
    <li><a href="">Продвижение</a></li>
    <li><a href="">Портфолио</a></li>
    <!-- Причем не важно сколько пунктов, последний всегда переносится! -->
    <!--<li><a href="">Цены</a></li>
    <li><a href="">Заказать</a></li>
    <li><a href="">Услуги</a></li>
    <li><a href="">Продвижение</a></li>
    <li><a href="">Портфолио</a></li>-->
</ul>

CSS

.mainMenu{
    height: 40px;
    list-style: none;
    background-color: #0f0;
    position: absolute; /* Если position = absolute */
}
li{
    float: left;
    margin-right: 4%; /* Из-за него переносится на другую строку */
    /*padding-right: 4%; Так тоже самое будет */
}
a{
    display: block;
    height: 31px;
    padding: 9px 10px 0;
}