How to align text to the right in a list

Question

I’m trying to make a change to a code I have and what seemed relatively easy to me became a difficulty, what I have is this:

<div class="top-bar">
  <div class="container">
    <div class="row">
      <div class="col-md-6"> <img id="brand-image" alt="ANC Estofados" src="images/anc.png"> </div>
      <div class="col-md-6">
        <ul class="contact-details">
          <li><a href="#"><i class="icon-phone"></i> [phone]</a></li>
          <li><a href="#"><i class="icon-mail-2"></i> [email protected]</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

The text I need to line up right are the ones inside the div top-bar where I have positioned a ul top-bar.

The CSS I have is this:

.top-bar .contact-details li {
    display: inline-block;  
}

.top-bar .contact-details li a:before {
    position: relative;
    content: "|";
    font-size: 18px;
    margin: 0 3px;
    top: -1px;
    color: #ddd;
}

.top-bar .contact-details li a:before {
    color: #aaa;
}

.top-bar .contact-details li:first-child a:before {
    display: none;
}

.top-bar .contact-details li a {
    font-size: 18px;
    display: block;
    line-height: 68px;
    text-align: right;
}

What I tried to do was align the text to the right with text-align: right; in the above code, but it had no effect when published.

If you prefer to take a look at the project, the link is this: Website

Answer 1

The point is to use right alignment on an inline-block element. Try using float right;

.top-bar .contact-details li {
    display: block;
    float: right;
    margin-right: 10px;
}

Answer 2

Your problem is not the alignment of the text itself, but the positioning of the element li within the ul.

Apply the code below in the element ul:

text-align: right;

Thus:

.top-bar ul {
    text-align: right;
};

Obs.: No need to use float, which can mess up your code.

Answer 3

This way, the order of the menu items will reverse. I propose a small change to your proposal (applying "lu" instead of "li")

.top-bar . contact-Details ul { display: block; float: right; margin-right: 10px; }