How do i make a horizontal vertical bar with a logo on the left

I've tried doing something like this

(LOGO) (HOME) (BLAH) (OTHER STUFF) (CONTACT US) But whatever i did it either didn't align the navigation bar how i wanted it to, or messed up the logo's position while the navigation bar still wasn't in place. Here's my code: HTML

<div id="topbar">         > 
 <div id="tb_logo">
<a href="https://acrazytown.com">
    <img src="logo_small.png"/>
        </a>   
        <ul id="tb_hyperlink">  
            <li><a href="https://acrazytown.com/">HOME</a></li>
            <li class="space">|</li>
            <li><a href="https://acrazytown.com/my-projects">MY PROJECTS</a></li>
            <li class="space">|</li>
            <li><a href="https://acrazytown.com/news/">NEWS</a></li>
            <li class="space">|</li>
            <li><a href="https://status.acrazytown.com/">STATUS</a></li>
            <li class="space">|</li>
            <li><a href="https://acrazytown.com/contact">CONTACT</a></li>
    </ul>
 </div>

</div> 

CSS

body{
    margin: 0;
    padding: 0;
    background-color:#000000;
}
p, a, h1, h2, h3, h4, h5, h6, ul{
    color:#ffffff;
}
#topbar{
    height: 50px;
    background-color: #242424;
    width:100%;
    display:block;
}
#tb_hyperlink{
    display:inline;
    left:0;
  }
ul{
    display:inline-block;
    list-style: none;
    position:fixed;
  }
li{
    display: inline;
  cursor: pointer;
  padding: 20px;
  margin-left: 1px;
  }
a{
  text-decoration: none;
  }  

#space{
    padding: 0 10px;
  }