# NavBar width problem

**URL:** <https://forum.freecodecamp.org/t/navbar-width-problem/404856>\
**Category:** General\
**Created:** [June 17, 2020, 2:49pm UTC](https://forum.freecodecamp.org/t/navbar-width-problem/404856 "2020-06-17T14:49:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jonss](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jonss/32/154631_2.png) [@Jonss](https://forum.freecodecamp.org/u/Jonss)\
**Post date:** [June 17, 2020, 2:49pm UTC](https://forum.freecodecamp.org/t/navbar-width-problem/404856/1 "2020-06-17T14:49:03Z")

</div>

Hello guys!  
I am new to HTML and CSS and I have been playing with it for few days. Right now I am working on a webpage for my friend, but I encountered strange issue and I have no idea what to do.

My navigation bar has some blank space on its left, but on the right side it ends further disturbing whole design. Do you have any idea what is the problem here and how can I solve it? I want it to have the same blank space both on left and right.

I know that this code is probably really bad nad messy, but I am just starting! 😃

Source code: [https://codepen.io/jonssx/pen/XWXNaWO](https://codepen.io/jonssx/pen/XWXNaWO)

Screenshot: [https://i.imgur.com/r3R9gvT.jpg](https://i.imgur.com/r3R9gvT.jpg)

(I hope that design is a proper thread for my problem, I am sorry if it is not.)

---

<div class="post-metadata">

**Author:** ![slay.py](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@slay.py](https://forum.freecodecamp.org/u/slay.py)\
**Post date:** [June 17, 2020, 2:57pm UTC](https://forum.freecodecamp.org/t/navbar-width-problem/404856/2 "2020-06-17T14:57:50Z")

</div>

Hello @Jonss,  
yes your html is a bit messy 🙂 , but no worries, we all started from there!  
As you setted `top:0;`, you can set

```auto
left:0;

```

inside your nav selector!  
If you have other doubts feel free to reply!  
Cheers

---

<div class="post-metadata">

**Author:** ![Jonss](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jonss/32/154631_2.png) [@Jonss](https://forum.freecodecamp.org/u/Jonss)\
**Post date:** [June 17, 2020, 3:02pm UTC](https://forum.freecodecamp.org/t/navbar-width-problem/404856/3 "2020-06-17T15:02:42Z")

</div>

First of all - thank you for reply! 😃

I tried doing that allready, but what I get is the nav bar stretching from left to right without leaving any blank spaces. I would like to have the same blank space on the right as on the left side. Is it possible?

---

<div class="post-metadata">

**Author:** ![slay.py](https://avatars.discourse-cdn.com/v4/letter/s/c5a1d2/32.png) [@slay.py](https://forum.freecodecamp.org/u/slay.py)\
**Post date:** [June 17, 2020, 3:14pm UTC](https://forum.freecodecamp.org/t/navbar-width-problem/404856/4 "2020-06-17T15:14:36Z")

</div>

Oh , i’m sorry, I didnt’ read that section!  
A quick fix is to set

```auto
width:98%
left:1%;

```

Cheers

---

<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:** [June 1, 2021, 6:49pm UTC](https://forum.freecodecamp.org/t/navbar-width-problem/404856/5 "2021-06-01T18:49:45Z")

</div>

Closed on June 1, 2021, 6:49pm UTC