an issue with applying background color to nested elements of class .row - Zurb foundation css framework

I am using foundation framework to build a responsive website.

I have following html

<div class="row">
    <div class="large-12 columns">
        <div class="wrapper">
            <div class="large-6 small-6 columns">
                <h1>site-title</h1>
            </div>
            <div class="large-6 small-6 columns">
                <p>descrption</p>
            </div>
        </div>
    </div>
</div>

css

.wrapper {
    color: red;
    background: green;
}
h1 {
    color: red;    
}

when I add background color to the .wrapper class it doesn't work. this happens always when applying a background to a wrapper class of columns inside a row and a row has columns which makes altogether 12 columns.

eg:

large-11 + large-11 , large-2+ large-10, large-6+large-6 and etc..

I have crated a jsfiddle for this

here you go Fiddle

<div class="row">
    <div class="large-12 columns">
        <div class="wrapper">
            <div class="large-6 small-6 columns">
                <h1>site-title</h1>
            </div>
            <div class="large-6 small-6 columns">
                <p>descrption</p>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
</div>