Align list items to right for navbar

HTML-CSS
1

Hi guys,

Since a couple of weeks I’m trying to learn myself coding and luckily i found freeCodeCamp.

Now I got to the part where I have to make my portfolio but I’m already stuck on my navigation bar.

I’d like to align my menu items to the right side of the screen. So i added float:right; to my li style. But this reverses my list items. When i add this code to my ul nothing seems to happen. Anybody who can help me out?

This is my code so far:

> <style>
>   .active{
>     background-color:black;
>     color:white;
>   }
>   a {
>     display:block;
>     padding: 7px;
>   }
>   ul{
>     background-color: #f1f1f1;
>     position: fixed;
>     top:0;
>     width:100%;  
>   }
>  li{
>     display: inline;
>     width: 80px;
>     text-align: center;
>     float: right;
>     border-left: 1px solid #bbb;
>   }
>   li:hover{
>     background-color: #136432;
>     color:white;
>   }
>   li:last-child {
>     border-right: 1px solid #bbb;
>   }
> </style>

> <ul>
>   <li><a>about</a></li>
>   <li><a>portfolio</a></li>
>   <li><a>contact</a></li>
> </ul>
2

Enclose your unordered list inside a nav element. Give a class or ID to that nav. then float that nav to right in CSS.

.my-navbar {
     float: right;
}

And remove the fixed positioning from the ul.
Hope this will solve the problem.

1 Like