Navigation Buttons no whitespace underneathe

Really want to try have no whitespace between my nav buttons and the image below. Cant imagine it being too difficult but this has got me having a mind block! This is what I want to achieve with the arrow showing where I want the change to happen:

This is my code so far:

    <div class="row">
      <div class="large-6 small-12 columns">
        <div class="logo"><img src="img/logo.png" alt="Body Metrix">
        </div>
      </div>

            <div class="large-6 columns" id="nav-btn">
              <ul class="navigation">
                <li class="active"><a href="#">Home</a></li>
                <li class="not"><a href="#">About</a></li>
                <li class="not"><a href="#">Contact</a></li>
                <li class="not"><a href="#">Services</a></li>
              </ul>
      </div>
    </div>

<div id="wrapper">
  <div class="row">
    <div class="large-12  columns">
      <div class="kickstart"><img src="img/kick-start.png">
        <p class="getfit"><img src="img/get-fit.png"></p>
        <p class="home-text"> BodyMetrix Personal Training is a new company, based in South London, aiming to bring one-on-one training sessions and personalised exercise and nutrition plans. </p>
        <p class="get-contact"><img src="img/get-contact-btn.png"></p>
      </div>
    </div>
  </div>
</div>

and the css:

ul .navigation {
    margin-left: 2.5px;

    display: block;
    list-style-type: none;
    text-align: center;
    padding: 0;
}
.navigation li {

    display: inline-block;

}
.navigation .active {
    padding:0;
    width: 100px;
    height: 100px;
    background-color: #8fbe4e;
    text-decoration: none;
    color: #ffffff;
    font-size: 0.9em;
    font-family: 'Open Sans', sans-serif;
}

.navigation .active a {
    margin-top: 30px;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 0.9em;
    font-family: 'Open Sans', sans-serif;
}
.navigation .not{

    width: 100px;
    height: 100px;

}
.navigation .not a {
    background-color: #ffffff;
    text-decoration: none;
    color: #7f8183;
    font-size: 0.9em;
    font-family: 'Open Sans', sans-serif;
}

.navigation li a:hover {    
    color: #50B748;
}

#wrapper {
    background-image: url("../img/home-img.png");
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width: 100% !important;
    z-index: 0;
}

There's a margin between the ul tag and the image below. Therefore you can solve the problem like so:

.navigation { margin:0; }

jsFiddle demo.

So why was the margin there in the first place?

You see, by default ul tags have a top-margin and bottom-margin, which you can see for example if you inspect a ul tag with Chrome:

ul, menu, dir {                                             user agent stylesheet

    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;

}