Display certain li elements in a single row

<div class="hamburguer">
            <button><i class="fa-solid fa-bars"></i></button>
            <ul class="more">
                <li><a class="info" href="#about">About</a></li>
                <li><a class="info" href="#trailer">Trailer</a></li>
                <li><a class="info" href="#locations">Locations</a></li>
                <li><a class="info" href="#media">Media</a></li>
                <li class="social"><a href="twitter" target="_blank"><i class="fa-brands fa-x-twitter"></i></a></li>
                <li class="social"><a href="discord" target="_blank"><i class="fa-brands fa-discord"></i></a></li>
                <li class="social"><a href="youtube" target="_blank"><i class="fa-brands fa-youtube"></i><a></li>
            </ul>
</div>

nav ul {
    right: 0px;
    top: 0px;
    padding: 0;
    margin: 0;
    height: 100%;
    position: absolute;
    display: block;
    list-style: none;
    padding-right: 1em;
}
nav ul li {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding-right: 0.4em;
    line-height: 55px;
}
.hamburguer {
    display: inline-block;
    position: absolute;
    right: 0px;
    margin-right: 0.5em;
}
.hamburguer .menu {
    position: absolute;
    background-color:rgba(102,0,10,0.9);
    width: 180px;
    right: -7px;
    box-shadow: -5px 5px 5px #310101;
    white-space: nowrap;
    }
.hamburguer:hover .more {
    display: grid;
}
.hamburguer:hover .menu {
    height: 18em;
}
.hamburguer .more .info {
    background-color: #0068bd;
}
.hamburguer .more .social {
    background-color: #FFD614;
    display: inline-block;
}