Foundation - Rows don't clear?

Question

I'm using Zurb Foundation 5 and was looking to have a .row inside of a .row so that the .row could act as a wrapper for multiple columns. This worked great, but when I went to add a background inside of the inner row, it bleeds over into the top row - is this normal behavior?

I have attached a screenshot and the code I am using.

<div class="row" id="banner" >

    <div class="large-12 medium-12 columns" style="background:green;">
        <h1>Banner/Top</H1>
    </div>

    <div id="bio" class="row"  style="background:red;"  >
        <div class="large-6 medium-6 columns" >
            <h1>LEFT</H1>
        </div>  
        <div class="large-6 medium-6 columns" >
            <h1>RIGHT</H1>
        </div>
    </div>

</div>

Screenshot:

Answer 1

I think you need to put the top banner in it's own row that it takes up the full width. Like this:

<div class="row" id="banner" >

    <div class="row">
        <div class="large-12 medium-12 columns" style="background:green;">
            <h1>Banner/Top</H1>
        </div>  
    </div>

    <div id="bio" class="row"  style="background:red;"  >
        <div class="large-6 medium-6 columns" >
            <h1>LEFT</H1>
        </div>  
        <div class="large-6 medium-6 columns" >
            <h1>RIGHT</H1>
        </div>
    </div>
</div>

edit: you may need one large-12 column that wraps both the banner+#bio rows