Выровненная по правому краю панель навигации

Question

Меню навигации не выравнивается вправо. Пожалуйста, помогите!

** HTML код: **

<nav id="main">
    <ul>
        <li><a href="work.html">Work</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>   
</nav>

** CSS-код (не работает): **

nav#main li {
    float: left;
    text-decoration: none;
    text-align: center;
}

Я попробовал это, но это не сработало:

nav#main {
    float: right;
}

Answer 1

попробуйте, вам не нужен поплавок, он работает

nav#main ul li  {
text-align: right;
text-decoration: none;
display:inline-block;
}

#main{
text-align: right;
 }


<nav id="main">
<ul>
    <li><a href="work.html">Work</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>   
</nav>

Answer 2

Попробуйте установить ширину для вашего элемента навигации или установить его свойство display для встроенного блока. Это элемент уровня блока, поэтому по умолчанию он занимает все доступное горизонтальное пространство. Так что, если он имеет ширину 100%, вы не можете видеть, где он выровнен / перемещен.

nav#main {
   display: inline-block;
}

или

nav#main {
   width: 50% /*for example*/
}