title: Vertical aligning of inline-block nav list in section
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*,
  *: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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="primary-header"&gt;
  
    &lt;div class="grid group"&gt;
  
      &lt;a href="index.html"&gt;
        &lt;img src="http://i58.tinypic.com/2q2prah.png" class="logo" alt="logo"&gt;
      &lt;/a&gt;
  
      &lt;nav class="nav primary-nav"&gt;
        &lt;ul&gt;
          &lt;li&gt;O firmie&lt;/li&gt;
          &lt;!--
        --&gt;
          &lt;li&gt;Oferta&lt;/li&gt;
          &lt;!--
        --&gt;
          &lt;li&gt;Realizacje&lt;/li&gt;
          &lt;!--
        --&gt;
          &lt;li&gt;Kontakt&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
  
    &lt;/div&gt;
  
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and here's the effect i'm gonna reach:</p>
  
  <p><img src="https://i.stack.imgur.com/kygRl.jpg" alt="enter image description here"></p>
  
  <p>So the problems are:</p>
  
  <ol>
  <li><p>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</p></li>
  <li><p>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?</p></li>
  <li><p>After i point any menu element with cursor, all the menu elements move 1px to bottom, why?</p></li>
  </ol>
  
  <p>Thanks for your answers, i was searching for answers for about 2 hours and i still didn't find it... please, help me..</p>