How do I set width to include browser scrollbar? - html

Question

I have a website that I'm designing to be responsive to work on various browsers and devices, most of my content is set with widths to either auto or 100%. However my elements aren't exactly centered as the website includes the width under the scrollbar. I want the width to the available room that you can see, so that my website will center properly.
For example my navbar is correctly aligned on the left, but not the right side of the page. Here is the CSS for my navbar, I have LI bullets that make up the options in the HTML.
#header {
border: 2px solid black;
border-top: none;
background-color: #FFFFFF;
height: 2.75em;
left: 0px;
right: 0px;
width: 100%;
z-index: 1;
position: fixed;
margin-top: -2.55em;
}
#navbar {
position: relative;
text-align: center;
right: 0px;
left: 0px;
width: auto;
display: inline;
}
ul {
left: 0px;
right: 0px;
top: 0px;
}
li {
display: inline;
text-align: center;
width: auto;
padding-left: 5em;
padding-right: 5em;
}

Answer 1

Please try this : http://jsfiddle.net/sqp4nfg5/1/
and css :
body { margin:0; padding:0
}
#header {
background-color: #777;
color: #fff;
float: left;
width: 100%;
z-index: 1;
}
#navbar {
float: left;
width: 100%;
}
ul { margin:0; padding:0
}
li {
float: left;
padding-left: 2%;
padding-right: 2%;
text-align: center;
height:35px; line-height:35px; list-style:none;
}
.center_div{float:left; width:100%; }
.center_div div{width:90%; margin:0 auto; overflow:hidden; border:1px solid lightpink; padding:1% 2%}