Hvor kommer det luft fra?

Jeg sidder og roder lidt, med at få bygget et tabel layout op via css og <div>, og er resten helt tilfreds. Men så opdager jeg at der er luft imellem min øverste grid og midterste grid. Men kan lige se hvorfra det skulle komme. Kan I det?

------------- HTML --------------
<div class="grid_top">
    <div class="row">
        <div class="header">header</div>
    </div>
    <div class="row">
        <div class="menu"></div>
    </div>
</div>
<div class="grid_mid">
    <div class="row">
        <div class="navi"></div>
        <div class="container"></div>
    </div>
</div>
<div class="grid_bottom">
    <div class="row">
        <div id="footer">footer</div>
    </div>
</div>



-------------- CSS ---------------
@charset "utf-8";

html,body {
    margin:0;
    padding:0;
    }
   
.grid_top {
    width:1024px;
    height:97px;
    margin:0 auto;
    background-color:#FFF;
    background-image: url(../images/layout_01.jpg);
    display: table;
    background-repeat:no-repeat;
    border-collapse:collapse;
}

.grid_mid {
    width:1024px;
    height:572px;
    margin:0 auto;
    background-color:#FFF;
    background-image: url(../images/layout_02.jpg);
    display: table;
    background-repeat:no-repeat;
    border-collapse:collapse;
   
}

.grid_bottom {
    width:1024px;
    height:101px;
    margin:0 auto;
    background-color:#FFF;
    background-image: url(../images/layout_03.jpg);
    display: table;
    background-repeat:no-repeat;
    border-collapse:collapse;
}

.header {
  display: table-cell;
  width: auto;
  height:70px;
  vertical-align:middle;
  text-align:center;
 
}

.menu {
  display: table-cell;
  width: auto;
  height:17px;   
 
}

.row {
  display: table-row;
 
}

.navi {
  display: table-cell;
  width: 195px;
  height:572px;   
}

.container {
  display: table-cell;
  width: auto;
  height:572px;   
}