Reply To: Moving the text to the right side of the navbar

[Beverleyh]

When I use the display:block on the a elements the elements then stack on top of each other.

That was for something else – my misunderstanding. To make the li buttons sit flush up against each other you have to get rid of the spaces that are created by new-lines in the html. Here are some ways to do that https://css-tricks.com/fighting-the-space-between-inline-block-elements

What can I do in order to center the text in the middle of the bar?

Here are ways to vertically align elements https://css-tricks.com/centering-css-complete-guide/

And, the borders of the elements are not touching on the left and right sides of each element.

Try cancelling one of the side borders on the li elements with border-left:0;. Then use li:first-of-type { border-left:2px solid #fff } to put it back on the first li.

and for the element over which the cursor is hovering to be highlighted

You can use the :hover selector li a:hover { /* your styles here */ }