Nav bar not covering the width of my page

Please i need help. My nav bar is not covering the width of my page. Below is the css code
.navbar {
width: 100%;
float: right;
margin: 0 0 1em 0;
padding: 8px;
background-color: #f2f2f2;
}
.navbar ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0; }
.navbar li {
float: right; }
.navbar li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
.navbar li:first-child a {
border-left: 1px solid #ccc; }
.navbar li a:hover {
color: #c00;
background-color: #fff; }
.navbar a.active {
background-color: #aaa;
color: #444;
cursor: default;
}

Is your navbar inside a containing div? Could you post a codepen so we can have a look at the whole thing?

This is my html code

yes is inside a container div

Your navbar is taking up 100% of the available width; it’s the container that’s not expanding as you expect.

Try changing the class of the container to container-fluid.

I change it to container-fluid as you said but it did work
then i changed the selector to an id selector. it works
but i really dont understand why it did not work for the class selector

Because Bootstrap uses classes to add functionalities. There is no such thing as container-fluid id. You can check the documentation on its website.