Error de validación html5!

Buenas, estoy intentando arreglar este error

Element p not allowed as child of element span in this context. (Suppressing further errors from this subtree.)

y el codigo es este:

<div id="wrap">
<a href="" title="Download Me!" id="btn-wrap">
<span class="title">
<p style=" text-align:center;">DESCARGA</p>
</span>
<div id="info">
<p><strong>Version 1.1
</strong>
<span>3.5 MB</span>
</p>
</div>
</a>
</div>

Con estos estilos:

#wrap {
margin-top: 15px;
margin-left: -280px;
}

#btn-wrap {
position:relative;
padding:5px;
margin:0 auto;
width:230px;
height:50px;
display:block;
text-decoration:none;
margin-bottom:30px;
background: #242428;
background: -webkit-gradient(linear, 0 bottom, 0 top, from(#2d2d30 ), to(#17171a));
background: -moz-linear-gradient(-90deg, #17171a, #2d2d30 );
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0 1px 0 #37373b;
-moz-box-shadow: 0 1px 0 #37373b;
box-shadow: 0 1px 0 #37373b;
}

span.title{
color:#d6d6e7;
font:19px/58px "BebasNeueRegular", Arial, sans-serif;
height:50px;
width:230px;
display:block;
position:relative;

-webkit-box-shadow: 0 -1px 0 #8d8d94, 0 1px 1px #0b0b0c;
-moz-box-shadow: 0 -1px 0 #8d8d94, 0 1px 1px #0b0b0c;
box-shadow: 0 -1px 0 #8d8d94, 0 1px 1px #0b0b0c;
background: #52525c;
background: -webkit-gradient(linear, 0 bottom, 0 top, from(#383840 ), to(#5a5a64));
background: -moz-linear-gradient(-90deg, #5a5a64, #383840 );
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
z-index:5;
-webkit-transition:width .2s ease-out;
-moz-transition:width .2s ease-out;
-o-transition:width .2s ease-out;
}

span.title p {
position: relative;
top:-5px;
left: 0px;
}

#btn-wrap:hover span.title {
font-size:14px;
width:120px;
}

#btn-wrap:hover span.title p {
left:0px;
}

#info {
position:absolute;
height:50px;
width:230px;
top:7px;
right:4px;
-webkit-box-shadow: 0 -1px 0 #404042, 0 1px 1px #0b0b0c;
-moz-box-shadow: 0 -1px 0 #404042, 0 1px 1px #0b0b0c;
box-shadow: 0 -1px 0 #404042, 0 1px 1px #0b0b0c;
background: #2a2a2d;
background: -webkit-gradient(linear, 0 bottom, 0 top, from(#212124 ), to(#2a2a2d));
background: -moz-linear-gradient(-90deg, #2a2a2d, #212124 );
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
z-index:4;
}

#info p {
width:65px;
margin:11px 18px 0 0;
position:absolute;
right:0;
color:#7c7c84;
font:12px/13px Arial, sans-serif;
text-align:left;
}

Simplemente quitando la etiqueta "p" ya no muestra el error, pero el texto "descarga" se va 5px abajo, y al no tener etiqueta no puedo moverlo. En el momento que le pongo una etiqueta (ya sea p, div, etc.) vuelve el error.

¿Alguna idea?

Gracias

P.D. Podeis verlo en voorfilms (aqui abajo, en mi firma) si entrais en uno de los cortos. Abajo en el desplegable aparecen 2 botones "descarga" (los cuales serán "descarga HD" y descarga normal"). La verdad que están chulos esos botones (por supuesto no son mios, no llego a tanto).