Intanto evitando di usare elementi di blocco come i paragrafi dentro a degli elementi inline come gli span
In html ci sono elementi di blocco come div e p che sono dei contenitori e degli elementi detti inline (in linea) che non contengono nulla ma definiscono ad esempio un particolare stile, come span strong ed em.
I primi contengono i secondi ma non viceversa.
Quindi inizia a metetre ad esempio un div al posto di <span class="text"> e vedi cosa succede.