display: inline-block问题

css:#nav1
{
position: relative;
top:20px;
left: -20px;

width: 400px;
height: auto;
margin: 0 auto;

}

.head-nav li
{
display: inline-block;
border: 4px solid yellow;
width: 50px;
height: 30px;
background-color: red;
}

.first
{

color: #fff;
background-color: red;

}
html:
怎么解决，为什么会出现第一个往下偏移的情况

看下 .first和.item的style