почему диф в конце списка опустился тем самым увеличивая высоту ли с бордерами
*{
margin:;
padding:;
border: none;
}
.wheader{
text-align: center;
width: 1100px;
margin: auto;
height: 90px;
}
.wheader img {
margin-top: 20px;
}
.wmenu{
height: 50px;
background-color: #fafafa;
border: 1px solid #eee;
}
.menu{
width: 1100px;
margin: auto;
height: 50px;
}
.menu-list{
list-style:none; display:table-row;
}
.menu-list li{
display:table-cell; width:auto; text-align:center; border-left:2px solid #eee;
}
.menu-list a:hover{background-color: #eee;
}
.menu-list li:last-child{
border-right:2px solid #eee;
}
.menu-list li a {
display:block; width:1000px; height:50px; vertical-align:middle; display:table-cell; font:14px Verdana, Geneva, sans-serif; color:#777; text-decoration:none;
}
.search-box{
width: 300px;
height: 50px;
}
<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Boomer" />
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>Интернет магазин Ортопедической обуви</title>
</head>
<body>
<div class="page">
<div class="header">
<div class="wheader">
<a href="/"><img src="images/logo.png" alt="Логотип сайта"/></a>
</div>
<div class="wmenu">
<div class="menu">
<ul class="menu-list">
<li><a href="#">Categori1</a></li>
<li><a href="#">Categori2</a></li>
<li><a href="#">Categori3</a></li>
<li><a href="#">Контакты</a></li>
<li><div class="search-box"><form method="get" action="">
<input type="text" name="seacrh-text" placeholder="Поиск" />
</form></div></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>