Positionnement logo

Bonjour, je n'arrive pas a positionner mon logo correctement sur mon site
Voici mon code HTML :

<header> 
		
		<nav class="bg-quicklinks">
			<ul>
				<li> <a href="acceuil.html"> ACCUEIL </a> </li>
				<li> <a href="plan.html"> PLAN DU SITE </a> </li>
				<li> <a href="contact.html"> CONTACT </a> </li>
				<li> <a href="annuaire.html"> ANNUAIRE DES PRODUCTEUR </a> </li>
			</ul>
		</nav>
		
		<div id="logo"> 
			<img src="Htdocs/Images/home.png" alt="logo Damassine" title="Logo Damassine"> 
		</div>
		
		<nav class="bg-quicklinks2"> 
			
				<ul class="bg-quicklinks2">
					<li> <a href="Damassine.html"> La Damassine </a> </li>
					<li> <a href="AOP.html"> AOP </a> </li>
					<li> <a href="actualités.html"> Actualites </a> </li>
					<li> <a href="producteurs.html"> Producteurs </a> </li>
					<li> <a href="contact.html"> Contact </a> </li>
				</ul> 
		</nav>
		
		</header>

Et voici mon code CSS

header {
	  position: relative ;
	  }

.bg-quicklinks{background:#f1ebde;height:15px;}

nav {
	position : relative ;
}

ul {
	list-style-type: none ;
	padding: 0px;
	margin: 0px;
	position: relative ;
}

ul li {
	display: block ;
	float: left;
	padding: 0px 10px;
	margin: 0px;
}

.bg-quicklinks2 {
	background:#ffffff;height:25px;
}

nav {
	position : relative ;
}

ul {
	list-style-type: none ;
	padding: 0px;
	margin: 0px;
	position: relative ;
}

ul li {
	display: block ;
	float: left;
	padding: 0px 10px;
	margin: 0px;
}

img #logo{
	position : absolute;
	display : block ;
	padding: 0;
	margin: 0;
	display: block;
	float:left;
	font-weight : 500;
	line-height: 1.1;

}

J'aimerai que mon en-tête ressemble à ca :



Sauf que chez moi ca ressemble à ca :



Aidez moi s'il vous plait

Merci