Header Doesn't Stretch Properly - css

Question

I have this problem when I collapse my webpage, the header shrinks instead of staying stretched across the entire page.
In this situation, I really have no idea what code to post along with it. I've tried various ways to fix it and nothing seems to work. Does anyone know what is going on when this happens? Here is my header HTML and CSS:
#header {
background-color: #C67171;
width: 100%;
}
#headtop {
text-align: right;
width: 1000px;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
That's pretty much it for the styling though, any help is greatly appreciated!
EDIT
Picture explaining the outcome of the code.
This is what the page looks like right now. This is how I want it to look. But for some reason, I keep getting the problem that I have in the picture above when I collapse the page. I don't want to links to stretch to the outside of my page, that does not fix my problem.

Answer 1

Try this Fiddle
#header {
background-color: #C67171;
display:inline-block;
}
#headtop {
text-align: right;
width: 1000px;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>

Answer 2

The problem is when the window is showing greater than 1000px on screen you're page seems to work. When you make it smaller the header will shrink thanks to width: 100%;.
But as we get smaller the div #headtop will stay the same size width: 1000px;. So the header will get smaller but the child element (#headtop) will still be big causing the scrolling you are seeing.
#header {
background-color: #C67171;
width: 100%;
}
#headtop {
text-align: right;
width: 100%;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
}
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
Here is how you keep the links away from the sides (look at comments for more on that). Give #headertop a max width and then give it a width of 80% or however much you want the gap to have.
JSFIddle Here