How do I get components in my header fit great together?

[shuma]

I am trying to design a header with a search form and navigation menu. But the components do not quite fit nicely together, the symmetry of the design is wrong. Here is a link of my design: header

For example look at Quora great header in firebug, everything looks great and it has a great symmerty for is components: Quora header

My question is: How do I fix it so every component fits together great?

Here is my HTML:

<%= link_to "Home", '#' %>


<%= link_to "Profil", '#' %>


<%= link_to "Sign out", '#' %>
















<%= yield %>

Here is my CSS:

/* The layout of the header*/

#layout_header {

float: left;

width: 100%;

background-attachment: scroll;

background-color: #F5F5F5;

border-bottom-color: #E5E5E5;

border-bottom-style: solid;

border-bottom-width: 1px;

background-image: none;

min-height: 31px;

padding-bottom: 5px;

padding-left: 0;

padding-right: 0;

padding-top: 5px;

margin:0;

}

/* Header content */

#header_contents{

position: relative;

margin-bottom: 0;

margin-right: auto;

margin-left: auto;

margin-top: 0;

padding-bottom: 0;

padding-left: 60px;

padding-right: 10px;

padding-top: 0;

width: 870px;

}



/* Navigation */

.nav_list{

float: right;

}

.nav_list ul{

list-style-image: none;

list-style-position: outside;

list-style-type: none;

}

.nav_list ul li{

margin-bottom: 0;

margin-left: 15px;

margin-right: 0;

margin-top: 8px;

float: left;

}

.nav_list ul li a{

font-weight: bold;

color: #222222;

cursor: pointer;

text-decoration: none;

}

.nav_list ul li a:hover{

font-weight: bold;

color:#fff;

text-decoration: underline;

}



/* search form*/

.form_wrapper{

width: 485px;

float: left;

overflow: hidden;

background-color: transparent;

}



.form_wrapper #search{

width: 463px;

height: 18px;

padding-right: 5px;

float: left;

border: 1px solid #CCC;

font-size: 16px;

background-color: #FFFFFF;

overflow-x: hidden;

overflow-y: hidden;

padding-bottom: 3px;

padding-left: 5px;

padding-right: 1px;

padding-top: 3px;

}

.form-wrapper #search::-webkit-input-placeholder{

color: #999;

font-weight: normal;

font-size: 16px;

}

.form-wrapper #search:-moz-placeholder {

color: #999;

font-weight: normal;

font-size: 16px;



}



.form-wrapper #search:-ms-input-placeholder {

color: #999;

font-weight: normal;

font-size: 16px;

}

[Author]

Posts