html - 导航按钮下方无空格

真的想尝试在我的导航按钮和下面的图片之间没有空白。无法想象这太难了，但这让我有一个思想障碍！
这就是我想要实现的目标，箭头显示了我希望更改发生的位置：
到目前为止这是我的代码：

    <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>

以及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;
}

最佳答案

ul标记和下面的图像之间有一个边距。所以你可以这样解决问题：

.navigation { margin:0; }

jsFiddle demo.
那么，当初为什么会有这样的差距呢？
您可以看到，默认情况下ul标记有上边距和下边距，例如，如果使用Chrome检查ul标记，您可以看到：

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;

}