Presenting this image:
https://i.sstatic.net/VNF7J.png
However, I desire it to be like this:
https://i.sstatic.net/ItgEN.png
Don't mind the white space, it's just decoration.
.server_name {
font-size: 50;
padding-left: 5;
z-index: -1;
display: inline-block;
padding-top: 0.001%;
}
.right_buttons {
z-index: 1;
list-style: none;
float: right;
vertical-align: top;
display: inline-block;
}
.option_button {
padding-bottom: 20;
font-size: 30;
text-align: center;
text-decoration: unset;
list-style: none;
font-weight: bold;
}
.option_text {
text-decoration: none;
text-align: center;
}
.server_options_button {
background-color: #555555;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.server_options {
float: left;
padding-top: 500;
list-style: none;
display: inline-block;
}<h1 class="server_name">Server_name</h1>
<ul class="right_buttons">
<li class="option_button"><a href="#" class="option_text">Change Server</a></li>
<li class="option_button"><a href="#" class="option_text">Log Out</a></li>
</ul>
<ul class="server_options">
<li class="server_options_button_ph"><button class="server_options_button">Moderation</button></li>
<li class="server_options_button_ph"><button class="server_options_button">Music</button></li>
<li class="server_options_button_ph"><button class="server_options_button">Minecraft</button></li>
</ul>