css styled list has a whole in it, but why?

I'm working on a website and just realized, that my list of projects has a whole in it, and I can't find the problem:

http://www.einfall7.ch/beta/category/manufaktur/moebel/

html code:

<li class="col-xs-12 col-sm-6 col-md-4">
                <a href="http://www.einfall7.ch/beta/manufaktur/massives-nussbaumbett/" class="title" title="massives nussbaumbett">
                    <img width="500" height="313" src="http://www.einfall7.ch/beta/wp-content/uploads/2014/04/dsc_0142-500x313.jpg" class="attachment-thumbnail size-thumbnail colorbox-1376  wp-post-image" alt="Zoller Nussbaum Doppelbett">                <span>massives nussbaumbett</span></a>
            </li>

css:

#content ul.ref{
margin: -15px;
padding: 0px;
}

#content ul.ref li{
    margin: 0px;
    list-style-type: none;
    padding: 15px;
}

ul.ref li a > span{
    display: block;
    position: absolute;
    bottom: 14px;
    height: 38.196%;
    overflow: hidden;
    width: calc(100% - 30px);
    padding: 15px;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    font-size: 1.5em;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.65) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26000000', endColorstr='#a6000000',GradientType=0 );
          -moz-transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
          -o-transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
          -webkit-transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
          transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

    ul.ref li a:hover > span, ul.ref li a.hover_effect > span{
        background-color: rgba(0,0,0,0.5);
    }