Problema mouse hover e responsive

[provoadimparare]

Ciao a tutti, sto realizzando un mio sito e ho un problema con i css. Devo avere sulla stessa riga il testo allineato a destra e sinistra (e fino qui tutto ok).

Nel testo di destra ho impostato un bordo e vorrei ricreare l'effetto hover ma non mi funziona. Stessa cosa per il responsive. Ho utilizzato lo stesso sistema per altre parti del sito e va benissimo, per questi div no, dove sbaglio?

<hr style="border-color: #C0D4DC;" />
<div id="box">
<div class="testosinistro">
<h5><span style="color: #005172;">Scopri come puoi assicurare la tua professione e avere la massima protezione
</span></h5>
</div>
<div class="pluto">
<h6><strong><span style="color: #aa272f;">Scopri</span></strong></h6>
</div>
</div>
<hr style="border-color: #C0D4DC;" />

/*Home*/

#box .testosinistro{
flat: left
}

#box .pluto{
float: right;
display: inline;
border: 1px solid #AA272F;
border-radius: 5px;
padding: 2px 20px;
text-transform: uppercase;
vertical-align: middle;
width: auto;
margin-top: -55px;
}

.pluto:hover {
background: none repeat scroll 0 0 #AA272FF
color: #FFFFFF
}

@media(max-width:400px)
{
#box .pluto{width:100px; float:none; display:block; position:relative;}
}

Grazie a tutti

[KillerWorm]

Ciao, ricontrolla meglio la sintassi, c'è qualche errore:

background: none repeat scroll 0 0 #AA272FF
color: #FFFFFF

Al posto della F dovrebbe andarci un (;) punto e virgola.