Подскажите как сверстать вот такую шапку, плиз.
2 дня сижу над ней, все плавает у меня постоянно.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пластиковые окна|Пластик и алюминий</title>
<link rel="stylesheet" href="css/styles.css" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<a href=""><img src="images/logo2.PNG" height="122" width="232" alt="Оконная компания Пластик и алюминий logo"></a>
<div>
<p>c 9 до 21 без выходных</p>
<p>+7 495 534-65-33</p>
</div>
<ul class="top-menu">
<li><a id="no-border" href="#">О компании</a></li>
<li><a href="#">Цены</a></li>
<li><a href="#">Услуги и продукты</a></li>
<li><a href="#">Акции</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</header>
<div></div>
<nav></nav>
<div id="heading"></div>
<aside></aside>
</div>
</body>
</html>
body {
background: #e2f0f8;
font-family: Arial;
}
#wrapper {
width: 1145px;
margin: auto;
position: center;
}
header {
background-color: #ffffff;
position: center;
height: 215px;
padding: 0px;
margin: 0px;
}
header>a>img {
margin-top: 15px;
margin-left: 30px;
margin-bottom: 20px;
float: top;
}
header>div {
float: right;
margin-top: 75px;
margin-right: 30px;
}
p {
font-family: Arial;
color: #484745;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 0.1em;
}
div p:last-child {
font-family: Arial;
color: #484745;
font-size: 31px;
font-weight: 400;
}
li {
width: 11.8%;
}
ul.top-menu{
width: 99.9%;
height: 57px;
position: fixed;
display: table;
margin: 0;
padding: 0;
position: relative;
}
#no-border {
border-left: none;
}
.top-menu a {
color:#5f6973;
text-decoration:none;
text-align:center;
border-left: 1px solid #5f6973;
}
.top-menu a:hover {
background:#7cc4d6;
color: #fff;
}
ul.top-menu li {
display: table-cell;
position: relative;
}
ul.top-menu li a {
display: block;
position: relative;
width: 100%;
height: 100%;
text-align: center;
background: #FFF;
line-height: 50px;
color: #5f6973;
}
Это вот такая херня у меня получилась
