Create nav bar with title on left and buttons on right

Question

This is what my nav bar looks like right now:

This is what I want it to look like (with the title on the left and the buttons on the right):

I separated the nav bar into a left aligned list for the title and a right aligned list for the buttons, but for some reason, the two lists are stacking up on top each other instead being on one line. How do I create the nav bar above?

HTML

<div class = "navBarWrapper">
   <div class="top bar">
        <ul class = "left">
            <li class = "title">Photo Albums</li>
        </ul>
        <ul class = "right">
            <li class = "buttons"> <a class = "iconLink" href = ""><img class = "iconNotHover" src = "images/uploadImage.png" alt = "uploadImage" width = "40" align = "middle"/></a></li>
            <li class = "buttons"> <a href = "login.html" class="otherPages">Login</a></li>
        </ul>
    </div> 
</div> 

CSS

.navBarWrapper {
  position: fixed;
    z-index: 1;
    width: 100%;

}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.bar {
  height: 8.02%;
}


.bar li {
    display: inline-block;
}

Answer 1

You don't want to use text-align to move a block element to the left or right. That will only align inline elements within a block element to the left or right, and the block element will still be on it's own row.

You could float the left/right elements to the left/right, but I would use flexbox on the parent, justify-content: space-between to separate left/right, and align-items to align them vertically however you want.

 .navBarWrapper { position: fixed; z-index: 1; width: 100%; } .bar { height: 8.02%; display: flex; justify-content: space-between; align-items: center; } .bar li { display: inline-block; } 

 <div class="navBarWrapper"> <div class="top bar"> <ul class="left"> <li class="title">Photo Albums</li> </ul> <ul class="right"> <li class="buttons"> <a class="iconLink" href=""><img class="iconNotHover" src="images/uploadImage.png" alt="uploadImage" width="40" align="middle" /></a> </li> <li class="buttons"> <a href="login.html" class="otherPages">Login</a></li> </ul> </div> </div> 

Or if you want to float them, here's that layout with overflow: auto on .bar to clear the floats.

 .navBarWrapper { position: fixed; z-index: 1; width: 100%; } .left { float: left; } .right { float: right; } .bar { height: 8.02%; overflow: auto; } .bar li { display: inline-block; } 

 <div class="navBarWrapper"> <div class="top bar"> <ul class="left"> <li class="title">Photo Albums</li> </ul> <ul class="right"> <li class="buttons"> <a class="iconLink" href=""><img class="iconNotHover" src="images/uploadImage.png" alt="uploadImage" width="40" align="middle" /></a> </li> <li class="buttons"> <a href="login.html" class="otherPages">Login</a></li> </ul> </div> </div>