Header sorunum

arkadaşlar css öğreniyorum örnek tasarım yapıyorum izlediğim derslerle

header'e logo için bir resim ekliyorum fakat resmi ortalayamıyorum line-height çalışmıyor ayrıca menu elemanlarına padding verince aşağı kayıyor.

yani kısaca headerdeki logoyu yani resmi ve mrenü elemanlarını bozulup kaymadan aynı hizaya nasıl getiririm

margin: 0 auto; ortalama
margin: 0px 5px sağ sol kaydırma
padding: 0px 5px sağ sol kaydırma
letter-spacing: 0.03em yazının aralarını ayırma vs.

local yoksa bir adres varsa bakıp yardımcı oluyum.

margin 0px auto yapınca logo ortalanıyor fakat menu elemanlarını yani aynı hizada olmuyor ortalayamıyorum biri aşağııda diğeri yukarda kalıyor
birde ben nette web tasarımla ilgili iki kitap tavsiyesi gördüm almalımıyım sizce
kitabın isimlerini yazayımmı cevabınız için tesekkürler

Menu için display, float ve width kullanın.
Ben html ve css Tayfun Erbilen videoları ve deneyerek öğrendim.

bende bir siteden takip ediyorum dersleri dersteki kişi headere line height vererek ortalıyor bende neden çalışmıyor sizce yarın tekrar deneyip sitedeki kişinin yaptığı gibi deneyip olmazsa kodları buraya atsam bakabilirmisiniz zahmet olmazsa

tmm, özelden de atabilirsiniz.

ilginiz için teşekkürler

işte kodlar

html














css
@charset "utf-8";
/* CSS Document */

@font-face{
font-family:"ARDECODE";
src:url("../fonts/ARDECODE/ARDECODE.ttf");}

@font-face{
font-family:"DroidSans";
src:url("../fonts/Droid_Sans/DroidSans.ttf");


}

@font-face{
font-family:"DroidSans";
src:url("../fonts/Droid_Sans/DroidSans-Bold.ttf");
font-weight:bold;}

@font-face{
font-family:"Quicksand";
src:url"(../fonts/Quicksand/Quicksand-Regular.ttf");
}

@font-face{
font-family:"Quicksand";
src:url("../fonts/Quicksand/Quicksand-Bold.ttf");
font-weight:bold;}

@font-face{
font-family:"Quicsand";
src:url("../fonts/Quicksand/Quicksand-Light.ttf");
font-weight:lighter;}

html,body{
font-family:"Quicksand","DroidSans",sans-serif;
font-size:12px;
}
a{
text-decoration:none;}
ul{
list-style-type:none;
font-size:0px;}

ul > li{
font-size:12px;
display:inline-block;}

#header{
background-color:#2A2E33;
height:100px;
line-height:100px;}

.content{
width:960px;
margin:0px auto;}

#logo{
float:left;}

#navbar a{
color:#FFFFFF;
text-transform:uppercase;
font-family:"DroidSans";
font-size:13px;
font-weight:bold;}

#navbar{
float:right;}

#navbar li{
padding:0px 10px;}

#navbar li: hover{
background-image:url("../images/menu-select.png");
cursor:pointer;}

CSS Kısmında :

.content{
width:960px;
height:500px; // Yüksekliği kendiniz belirlersiniz.
}
#logo{
float:left;
margin-left:280px; // Değeri yükselterek Logoyu dahada sağa çekebilirsiniz.
}

teşekkürler

İyi çalışmalar.