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><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;
}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;
}As shown in the screenshot: I would like to have the "social icons" displayed in a single row to fit the whole menu container but they somehow always end up in different rows, I have tried multiple display methods to no avail.
If anyone could come up with a solution I would appreciate it!

