HTML header trouble. Why is there spacing? - html

Question

Before i created a search bar or the menu-bar-search items the header looked great! Great spacing between the logo and links, they were centered on screen...etc. Now there is a GIANT gap to the left and right of the search bar and everything is leaning on the right side of the page. I've played with the menu-bar-overlay size and the size of all three elements within it, I've tried every suggestion I've found googgling for the last three days. Nothing works :/ stack overflow, you are my final hope. Please help.
My style.css
#main-container {
width: 100%;
min-height: 800px;
}
#menu-bar {
max-width: 100%;
height: 50px;
background-image: url('../images/menu.jpg');
background-repeat: repeat-x;
}
#menu-bar-overlay {
width: 1450px;
height: 50px;
margin:0 auto;
}
#menu-bar-left {
width: 250px;
height: 50px;
float: left;
padding-right: 8px;
background-image: url('../images/blog_small.png');
background-repeat: no-repeat;
}
#menu-bar-right {
float: left;
width: 670px;
height: 50px;
}
#menu-bar-right li {
color: white;
line-height: 15px;
font-size: 14pt;
font-family: "Arial Black";
font-weight: normal;
list-style: none;
display: inline;
border-right-style: groove;
border-right-color: rgba(47,173,255,0.5);
padding-right: 8px;
}
#menu-bar-right li a:link,
#menu-bar-right li a:active,
#menu-bar-right li a:visited {
color: white;
text-decoration: none;
}
#menu-bar-right li a:hover {
color: white;
background-color: rgba(211,211,211,1);
text-decoration: none;
}
#menu-bar-search {
float: left;
width: 300px;
height: 50px;
}
My header.jsp
<div id="main-container">
<div id="menu-bar">
<div id="menu-bar-overlay">
<div id="menu-bar-left"></div>
<div id="menu-bar-right">
<ul>
<li>Home</li>
<li>Admin</li>
<li>Add Article</li>
<li>Update Article</li>
<li>Delete Article</li>
</ul>
</div>
<div id ="menu-bar-search">
<form method = "post" action = "searchResults" name = "search">
<input type = "text" maxlength = "20" id = "search-field" required>
<input type = "submit" id = "search-button" value = "Search" style = "float:left; width:100px; margin-left:5px;">
</form>
</div>
</div>
</div>
<div id="top-picture">
<div id="picture-overlay-spacer"></div>
<div id="picture-overlay"></div>
</div>
<div id="header-spacer"></div></div>

Answer 1

Your #menu-bar-right has a width of 670px, which is much wider than its contents. Try setting that to auto, and then it'll stop pushing your search bar over to the left.
Your #menu-bar-search also has a width of 300px, which is why it might be appearing to have extra space to right of it.
Last, #menu-bar-overlay has a width of 1450px, which might be wider than you want it in many scenarios. Since it's so wide, the other content won't be able to fill it up.
Example: http://jsfiddle.net/dThv6/

Answer 2

Tried changing the size of bar-search?
width: 300px; to width: 530px; or a little less