div "filha" sai fora dos limites da div principal em que está

tenho uma div cabeçalho, dentro dela há outras duas divs, a logo e a escrito, eu queria que o logo flutuasse à esquerda, porém não está funcionando como o esperado, a div do texto está saindo da div cabeçalho, vejam:

O HTML:

<div class="cabecalho"> <!--div cabeçalho-->

<div class="logo"><!--logo-->
</div><!--fim logo-->

<div class="texto"><!--texto-->
</div><!--fim texto-->

</div> <!--fim div cabeçalho-->

O css:

.cabecalho { /cabeçalho pai/

 width:100%;
 height:20%;
 border:solid 2px;
}

.logo { /logo do cabeçalho/

 float:left;
width: 25%;
margin-left:2%;
height: 100%;
background-image:url(img/baner_teste.png);
background-size:100% 100%;
}

.texto {/texto cabeçalho/

 position:relative;
 margin-top:3%;
 width:70%;
 height:95%;
 background-color:#F00;
}

Onde estou errando?