Estou tentando fazer uma alteração em um código que tenho e o que para mim parecia relativamente fácil se tornou uma dificuldade, o que tenho é isso:
<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> +51 44 3233-3780</a></li>
<li><a href="#"><i class="icon-mail-2"></i> [email protected]</a></li>
</ul>
</div>
</div>
</div>
</div>
O texto que preciso alinhar a direita são os que estão dentro da div
top-bar
onde tenho posicionado uma ul
top-bar
.
O css que tenho é esse:
.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; }
O que tentei fazer foi alinhar o texto a direita com text-align: right;
no código acima, mas não surtiu nenhum efeito ao ser publicado.
Se preferirem dar uma olhada no projeto, o link é esse: Site