Estoy trabajando en una página que debe ser responsiva. La cuestión es que tengo un texto dentro de una etiqueta span y al verlo desde un celular las letras se enciman. Este es el fragmento del código: 

    <html>
    <body>
       <div style="margin:0 auto; max-width: 1000px;">
    	 <div>
    	   <p style="text-align: center;">
    			<span style="font-size: 36px;">
                  Este span es un elemento en línea; este fondo se ha coloreado 
                  para mostrar el principio y fin de la influencia del elemento en línea
                </span>
           </p>
         </div>
    	</div>
    </body>
    </html>
Me gustaría que me pudieran dar una explicación de por qué sucede esto, de antemano les agradezco su tiempo.