Alignment against parent div with CSS/HTML

Question

I'm working on a little project for my buddy's band and recently switched to a new navbar. How it's layed out is that the logo is in the center, and the page links are to the left/right of it. So far that's working fine, but I wanted to add some text or maybe an image to the right and can't figure out how to do this as the navbar is set to center everything. Example shown in image here: https://i.sstatic.net/nqB4h.jpg

Keep in mind this navbar always stays on the top of the screen.

Here's what it looks like at the moment, had to use span2 to

CSS:

.fixed-nav-bar {
      position: fixed;
      top: 0;
      z-index: 9999;
      width: 100%;
      height: 100px;
      background-color: #000;
      display: table;
}
span2 {
      display: table-cell;
      vertical-align: middle;
      position: relative;
    }

HTML:

<nav class="fixed-nav-bar">
<style>
ul {
    list-style-type: none;
    overflow: hidden;
    background-color:000;

}

li {
    display: inline-block;
}

li a {
    display: inline-block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
</style><span2>
<ul><center>
  <li><a class="active" href="#Home">Home</a></li>
  <li><a href="#About">About</a></li>
  <li><a href="#Video">Video</a></li>
  <li><img src="http://i.imgur.com/8Iu55Ho.png"></li>
  <li><a href="#Music">Music</a></li>
  <li><a href="#Press">Press</a></li>
  <li><a href="#Contact">Contact</a></li></center>
</ul></span2>
</nav>

Any help would be appreciated!

Answer 1

If you want your ul to stay on center of page i think you have to use position: absolute for text on right side so it goes out of elements flow. So it should look something like this

nav {
  position: fixed;
  background: black;
  height: 100px;
  width: 100%;
}

ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

a {
  color: white;
  padding: 0 10px;
  text-decoration: none;
}

.nav-inner {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  color: white;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

img {
  width: 50px;
}

<nav>
  <div class="nav-inner">
    <ul>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href=""><img src="http://i.imgur.com/8Iu55Ho.png"></a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
    </ul>
    
    <div class="text">Lorem ipsum</div>
  </div>
</nav>