salve ho un problema di posizionamento con i seguenti file il tutto mi sembra coretto o almeno non so dove sia il problema il risultato dovrebbe essere come quello nell'immagine



Link all'immagine

file style.css:
codice:
@charset "UTF-8";
/* CSS Document */
@font-face {
	font-family: 'Good-Times';
	src: url('font/good-times.ttf');
}
@font-face {
	font-family: 'Century-Gotic';
	src: url('font/Century-Gotic.ttf');
}
p {
	color: #000000;
	font-family: Century-Gotic;
}
#header {
	position: absolute;
	padding: 0 20%;
}
.logo {
	float: left;
	color: #9FEE00;
	font-family: Good-Times;
	font-size: 43px;
	padding: 0 10px 0 0;
	border-right: 1px solid #CCCCCC;
}
.messaggio {
	float: left;
	color: #000000;
	font-family: Century-Gotic;
	font-size: 23px;
	padding: 15px 0 0 10px;
}
.menu {
	float: right;
	color: #666666;
	font-family: Century-Gotic;
	font-size: 14px;
	padding-right: 20%;
	padding-top: 27px;
}
.link {
	color: #AAAAAA;
	font-family: Century-Gotic;
	font-size: 14px;
	text-decoration: none;
}
.link-activated {
	color: #999999;
	font-family: Century-Gotic;
	font-size: 14px;
	text-decoration: underline;
}
#slider {
	height: 35%;
	width: 100%;
	position: absolute;
	padding: 0 20%;
	margin-top: 100px;
	background-color: #CCCCCC;
}
file index.html:
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MFWEB</title>
<style type="text/css">
@import url("style/style.css");
</style>
</head>

<body>
  
  <div id="header">
    <div class="logo">MFWEB</div>
    <div class="messaggio">The Web Innovation</div>
    <div class="menu"> Home | Chi Sono | Servizi | Portfolio | Contatti </div>
  </div>
   
  
  <div id="slider">
  </div>
   
</body>
</html>