无法将Div更接近顶端

Question

我正在尝试在页面顶部创建一个包含六个div的块，并且在它下面有一个带有文本的div，并且正好位于div的3个宽块之下。目前，我在顶部排成6个div，底部排成一排，中间div出现。问题是中间div和顶部div块之间有一个空格。我的HTML是：

<div class="page">
<a href="/menu/kale-grain-bowls"><div class="col-m-2 col-2 kale-grain-bowls">Kale & Grain Bowls</div></a>
<a href="/menu/salads"><div class="col-m-2 col-2 salads">Salads</div></a>
<a href="/menu/burgers-sandwiches"><div class="col-m-2 col-2 burgers-sandwiches">Burgers & Sandwiches</div></a>
<a href="/menu/sides"><div class="col-m-2 col-2 sides">Sides</div></a>
<a href="/menu/smoothies-shakes"><div class="col-m-2 col-2 smoothies-milkshake">Smoothies & Milkshakes</div></a>
<a href="/menu/kids-real-meals"><div class="col-m-2 col-2 kids-real-meals">Kid's Real Meals</div></a>
<div class="menu-type">Sides</div>
<div class="foodblock col-m-3 col-3"><a href="sides/real-fries"><div class="real-fries">REAL FRIES</div><a>
<div class="textblock">hand-cut & finished in the oven</div></div>
<div class="foodblock col-m-3 col-3"><a href="sides/sweet-potato-fries"><div class="sweet-potato-fries">SWEET POTATO FRIES</div><a>
<div class="textblock">hand-cut & finished in the oven</div></div>
<div class="foodblock col-m-3 col-3"><a href="sides/crisp-veggies"><div class="crisp-veggies">CRISP VEGGIES</div><a>
<div class="textblock">broccoli, cauliflower, zucchini, carrots, kale</div></div>
<div class="foodblock col-m-3 col-3"><a href="sides/side-salad"><div class="side-salad">SIDE SALAD</div><a>
<div class="textblock">choose any of our salads as a side</div></div>
<div class="foodblock col-m-3 col-3"><a href="sides/seasonal-special-grilled-zucchini"><div class="seasonal-special">SEASONAL SPECIAL: GRILLED ZUCCHINI</div><a>
<div class="textblock">parm, basil, balsamic</div></div>
</div>

我的CSS是：

.page{
    height: 100%;
    width: 100%;
    text-align: center;
}
.menu-type{
    text-align: center;
    font-weight: bold;
    font-family: "Times New Roman", Georgia, Serif;
    font-size: 2.5em;
}
.kale-grain-bowls{
    background-image: url('../images-source/templateFoodMainPage.png');
    background-position: 0% 0%;
    height: 100px;
    float: left;
    margin:2.5px;
    position: relative;
}
.salads{
    background-image: url('../images-source/templateFoodMainPage.png');
    background-position: 0% 0%;
    height: 100px;
    float: left;
    margin:2.5px;
    position: relative;
    bottom: 72px;
}
.burgers-sandwiches{
    background-image: url('../images-source/templateFoodMainPage.png');
    background-position: 0% 0%;
    height: 100px;
    float: left;
    margin:2.5px;
    position: relative;
    bottom: 144px;
}
.sides{
    background-image: url('../images-source/templateFoodMainPage.png');
    background-position: 0% 0%;
    height: 100px;
    float: left;
    margin:2.5px;
    position: relative;
    bottom: 216px;
}
.smoothies-milkshake{
    background-image: url('../images-source/templateFoodMainPage.png');
    background-position: 0% 0%;
    height: 100px;
    float: left;
    margin:2.5px;
    position: relative;
    bottom: 288px;
}
.kids-real-meals{
    background-image: url('../images-source/templateFoodMainPage.png');
    background-position: 0% 0%;
    height: 100px;
    float: left;
    margin:2.5px;
    position: relative;
    bottom: 360px;
}
.real-fries{
    height: 200px;
    background-image: url('../images-source/communitybottom.png');
    float: left;
    width: 100%;
}
.sweet-potato-fries{
    height: 200px;
    background-image: url('../images-source/communitybottom.png');
    float: left;
    width: 100%;
}
.crisp-veggies{
    height: 200px;
    background-image: url('../images-source/communitybottom.png');
    float: left;
    width: 100%;
}
.side-salad{
    height: 200px;
    background-image: url('../images-source/communitybottom.png');
    float: left;
    width: 100%;
}
.seasonal-special{
    height: 200px;
    background-image: url('../images-source/communitybottom.png');
    float: left;
    width: 100%;
}

我一直在这工作几个小时，到目前为止没有任何牵引力。我被告知这可能是关闭div正确的问题，但我已经梳理了寻找错误而没有发现任何错误。请有人帮忙。我已经包含了CSS中使用的图像。这些只是临时图像而不是最终使用的图像。 http://imgur.com/a/ot32I