# Nav bar not covering the width of my page

**URL:** <https://forum.freecodecamp.org/t/nav-bar-not-covering-the-width-of-my-page/163880>\
**Category:** General\
**Created:** [December 15, 2017, 10:22am UTC](https://forum.freecodecamp.org/t/nav-bar-not-covering-the-width-of-my-page/163880 "2017-12-15T10:22:36Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Esetessy](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/esetessy/32/34689_2.png) [@Esetessy](https://forum.freecodecamp.org/u/Esetessy)\
**Post date:** [December 15, 2017, 10:22am UTC](https://forum.freecodecamp.org/t/nav-bar-not-covering-the-width-of-my-page/163880/1 "2017-12-15T10:22:36Z")

</div>

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;  
}

---

<div class="post-metadata">

**Author:** ![JamesRea83](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jamesrea83/32/65434_2.png) [@JamesRea83](https://forum.freecodecamp.org/u/JamesRea83)\
**Post date:** [December 15, 2017, 10:28am UTC](https://forum.freecodecamp.org/t/nav-bar-not-covering-the-width-of-my-page/163880/2 "2017-12-15T10:28:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Esetessy](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/esetessy/32/34689_2.png) [@Esetessy](https://forum.freecodecamp.org/u/Esetessy)\
**Post date:** [December 15, 2017, 10:53am UTC](https://forum.freecodecamp.org/t/nav-bar-not-covering-the-width-of-my-page/163880/3 "2017-12-15T10:53:39Z")

</div>

> **[Portfolio](https://codepen.io/Esther-Itolima/full/gopwwL/)**
>
> ...

---

<div class="post-metadata">

**Author:** ![Esetessy](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/esetessy/32/34689_2.png) [@Esetessy](https://forum.freecodecamp.org/u/Esetessy)\
**Post date:** [December 15, 2017, 10:56am UTC](https://forum.freecodecamp.org/t/nav-bar-not-covering-the-width-of-my-page/163880/4 "2017-12-15T10:56:47Z")

</div>

This is my html code

- Home
- About
- Skills
- Social Networks
- Contact

---

<div class="post-metadata">

**Author:** ![Esetessy](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/esetessy/32/34689_2.png) [@Esetessy](https://forum.freecodecamp.org/u/Esetessy)\
**Post date:** [December 15, 2017, 10:59am UTC](https://forum.freecodecamp.org/t/nav-bar-not-covering-the-width-of-my-page/163880/5 "2017-12-15T10:59:02Z")

</div>

yes is inside a container div

---

<div class="post-metadata">

**Author:** ![JamesRea83](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jamesrea83/32/65434_2.png) [@JamesRea83](https://forum.freecodecamp.org/u/JamesRea83)\
**Post date:** [December 15, 2017, 11:16am UTC](https://forum.freecodecamp.org/t/nav-bar-not-covering-the-width-of-my-page/163880/6 "2017-12-15T11:16:42Z")

</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.

---

<div class="post-metadata">

**Author:** ![Esetessy](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/esetessy/32/34689_2.png) [@Esetessy](https://forum.freecodecamp.org/u/Esetessy)\
**Post date:** [December 15, 2017, 11:25am UTC](https://forum.freecodecamp.org/t/nav-bar-not-covering-the-width-of-my-page/163880/7 "2017-12-15T11:25:49Z")

</div>

> [@JamesRea83](#):
>
> 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

---

<div class="post-metadata">

**Author:** ![sksundram](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sksundram/32/159168_2.png) [@sksundram](https://forum.freecodecamp.org/u/sksundram)\
**Post date:** [December 15, 2017, 12:58pm UTC](https://forum.freecodecamp.org/t/nav-bar-not-covering-the-width-of-my-page/163880/8 "2017-12-15T12:58:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:58pm UTC](https://forum.freecodecamp.org/t/nav-bar-not-covering-the-width-of-my-page/163880/9 "2021-01-16T17:58:30Z")

</div>