Css div header not working

HTML-CSS
#1

this should be simple but it seems to be a mess. Just want the site_name to the left with a little padding, and server:server_name to the right of it. Easy right? everything else in the css works great, but anything regarding moving the text is failing.
below is the mess i ended up with

originally it was basically margin-top,margin-bottom: auto, but that did not work

ps old guy here from the old days of “hotdog” editor (if you don’t remember that your too young hahaha), I finally see how nice CSS can be… so trying my hand at simple stuff. (failing miserably )

<div id="banner">
            <div class="site_name">COOL SITE</div>
            <div class="server_label">Server: </div>
            <div class="server_name"><?=SERVER_NAME;?></div>
</div>

AND THE CSS

#banner {
    width:100%;
    height:80px;
    background-color: #0092BC;
   
}

#banner .site_name {
    font-size: 30px;
    font-weight: bold;
    top: 20px;    
    display: inline-block;
    color: white;
    position: relative;
    padding-left: 100px;
}
#banner .server_label {
    display: inline-block;
    padding-left: 50px;
    top:17px;
    color: lightgray;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    
}

#banner .server_name {
    display: inline-block;
    top:18px;
    
    
    position: relative;
    color:black;
    font-size: 20px;  
    
}
#2

Hi,

I have changed the padding-left from 100px to 10px, I got this result : Capture2
The initial result look like this :

Capture3
Capture3800×170 3.39 KB

#3

Hi thanks for checking that out…
currently i have the top:20px (and this is just a guess) is there a way to vertically center that text automatically? ( example with centering horizontally, i can do margin-left:auto, and margine-right:auto and it works, but top/bottom does not seem to have the same effect - that was my first problem…

thanks again for looking at this

#4

To achive your goal , you can use CSS Flexbox Layout Module

Capture7
Capture7856×109 2.91 KB

Source code :

<!DOCTYPE html>
<html>

<style>
#banner {
    background-color: #0092BC;
   }

#banner .site_name {
    font-size: 30px;
    font-weight: bold;   
    color: white;
}
#banner .server_label {
    color: lightgray;
    font-size: 20px;
    font-weight: bold;
 }

#banner .server_name {
    color:black;
    font-size: 20px;  
}

ul {
  display: flex;
  align-items: center;
 }

li {
  display: flex;
  align-items: baseline;
  list-style: none;
  margin: 5px;
  padding: 5px;
}

</style>

<body>


<ul id="banner">
  <li class="site_name">COOL SITE</li>
  <li class="server_label">Server: </li>
  <li class="server_name"><?=SERVER_NAME;?></li>
</ul>

</body>
</html>
#5