CSS width 100% no working

Question

I have a navigation bar that is set to width 100%. It displays perfectly but the problem is that when it is zoomed, a space is left in the right side. You can see the working example at http://jsfiddle.net/ShNtf/ The follwing is my CSS code:-

.nav-container{
    width:100%;
    color:#fff;
    background:#000;
}
.nav-contained{
    min-width:350px;
}
}
body{
    padding:0;
    margin:0;
}

Answer 1

Assuming you want to keep min-width, add it to the container and it will work:

.nav-container{
  width:100%;
  color:#fff;
  background-color:#000;
  min-width:350px;
}

Answer 2

Problem:

When a horizontal scroll-bar is visible, background color doesn't fill browser width.

Solution:

I had success by moving the background-color definition to from .nav-container to .nav-contained .

.nav-container {
    width:100%;
}
.nav-contained {
    min-width:350px;
    background:#000;
    color:#fff;
}

http://jsfiddle.net/ShNtf/7/

Answer 3

It is because of min-width. When you zoom in, 350px are "multiplied" and if it is more than outer container width, it becomes wider and scrollbar is shown.

Remove that min-width to make words break into multiple lines after zooming.