Header doesn't work correctly when resizing web browser

Question

I made a header(menu) for my website from the left side to right side ( like in this image )

and it works. But when I resize web browser right side of header gets cut down ( image )

my code:

#header {
 width:auto;
 height:50px;
 background-color:#ffffff;
 margin-bottom:10px;
 border-bottom:1px solid #ccc;

}

#headercontainer {
 width:980px;
 margin:0px auto;
}

Answer 1

Don't use px in width, make your width size in percent like

#headercontainer
{
    width: 80%;
    margin: 0px auto;
}

Answer 2

Use percentage values for better flow. If you want more customization on how you want your website to behave in different screens use media queries. Here is a good tutorial

  #headercontainer {
     width:75%;
     margin:0px auto;
    }

Answer 3

#header {
width:100%;
height:50px;
background-color:#ffffff;
margin:0 auto 10px;
border-bottom:1px solid #ccc;
}

if you use auto , the header will adjust to the required width, so you need 100% . Of course, just trying to figure what your html looks like since you didn't include it, but in 9 out of 10 situations, this is what you need