Q:

gap in layout due to display:table

i have a difficulty and its about display:table , i was  working on a one page website and i have a navbar and a .product section below it , now inside .product the section , i have a carousel and i want the carousel centered vertically and so i have used the following technique :: 
@media only screen and (min-width : 768px) {
    .products {
        height: 100%;
        display: table;
        width: 100%;
    }
    .products .carousel-wrapper {
        display: table-cell;
        vertical-align: middle;
    }
}

FIDDLE HERE
unfortunatly there is a but gap between the .product section and the nav element , both sibling elements , if i add display:block to the products section than my layout gets screwed , but th gap is gone , so i need to stick to table . why is the gap there i have checked for margin and padding , but there is none , so i see nothing obvious for the gap to be there , but its still there . 
can somebody tell me why i am getting this huge gap ? 

A:

you have an margin-bottom: 20px; at your .navbar class
and you have 2 spans with an height of 50 px
thats your gap in the fiddle
you fiddle forked: http://jsfiddle.net/ej8dtd1z/

