Vertical aligning of inline-block nav list in section - html

Question

i'm begginer in html and css and i'm building my first site based on my psd project, i just started making it and i can't get through one problem.
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.grid {
margin: 0 auto;
width: 960px;
}
.primary-header {
position: relative;
background-color: #fff;
height: 85px;
}
.logo {
position: absolute;
top: 29px;
}
.primary-nav {
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
}
.nav {
text-align: right;
}
.nav li {
display: inline-block;
vertical-align: top;
margin: 0 30px;
padding: 11px 30px;
}
.nav li:hover {
border: 1px solid #333;
border-radius: 5px;
background-color: #333;
color: #fff;
}
.nav li:last-child {
margin-right: 0;
}
border:1px solid #333;
border-radius:5px;
background-color:#333;
padding-bottom:10px;
color:#fff;
}
.nav li:last-child {
margin-right: 0;
}
<header class="primary-header">
<div class="grid group">
<a href="index.html">
<img src="http://i58.tinypic.com/2q2prah.png" class="logo" alt="logo">
</a>
<nav class="nav primary-nav">
<ul>
<li>O firmie</li>
<!--
-->
<li>Oferta</li>
<!--
-->
<li>Realizacje</li>
<!--
-->
<li>Kontakt</li>
</ul>
</nav>
</div>
</header>
and here's the effect i'm gonna reach:
So the problems are:
After pointing with cursor on menu element, padding-top and padding-bottom is too big, it should be 11px and right now it's propably 19px
According to margin-top in ".nav li" my nav should be vertically aligned, but it's a little bit too much into bottom, if i set margin-top: 0px;, there is still some white space above my nav, why?
After i point any menu element with cursor, all the menu elements move 1px to bottom, why?
Thanks for your answers, i was searching for answers for about 2 hours and i still didn't find it... please, help me..

Answer 1

Here's my best reply to your questions:
1) The padding is in addition to your text. For example, with Firebug I can see that OFERTA is measured as 15px tall. Add 11px to top and bottom and you get 37px. To get it to 11px, you're going to have to reduce the font-size and add minimal padding. If you don't care as long as the menu item isn't too big, then just lower the vertical padding in
padding: 11px 30px;
2) By default, the ul element has some margins. Set the margin to 0 for nav to remove it.
3) Previously, before hovering, the CSS rules state that the menu item has no border. On nav li:hover, the CSS adds a border, which increases the overall area and to compensate and stay in the center, the text moves slightly downward. A fix would be to add a border to the nav li.
Also,
border:1px solid #333;
border-radius:5px;
background-color:#333;
padding-bottom:10px;
color:#fff;
}
seems to be out of place. It's missing a opening brace and an identifier.

Answer 2

For #1, Try reducing the padding on .nav li from padding: 11px 30px to padding: 5px 30px
For #2, Add a float: left on your .logo and remove the position: absolute
For #3, Remove the border: 1px solid #333 on .nav li:hover

Answer 3

Number 1 renders fine on IE11 at my machine. Show 11px padding-top and -bottom. So this is working as it should. Maybe it is not desired?
Number 2 is caused by the margin on the UL, it's 12px.
.nav ul {
margin-top: 0px;
}
Number 3 is caused by the added border on hover. You need to use extra padding or set a transparent border to nav.li
.nav li {
display: inline-block;
vertical-align: top;
margin: 0 30px;
padding: 11px 30px;
border: 1px solid transparent;
}