That final
<mn>(2*2*2)*(2*2*2)*(2*2*2)*(2*2*2)</mn>
has given up on markup and put it all in a number which doesn't really give the MathML renderer a chance. It would be better as
<mrow>
<mrow><mo>(</mo><mn>2</mn><mo>*</mo><mn>2</mn><mo>*</mo><mn>2</mn><mo>)</mo></mrow>
<mo>*</mo>
<mrow><mo>(</mo><mn>2</mn><mo>*</mo><mn>2</mn><mo>*</mo><mn>2</mn><mo>)</mo></mrow>
<mo>*</mo>
<mrow><mo>(</mo><mn>2</mn><mo>*</mo><mn>2</mn><mo>*</mo><mn>2</mn><mo>)</mo></mrow>
<mo>*</mo>
<mrow><mo>(</mo><mn>2</mn><mo>*</mo><mn>2</mn><mo>*</mo> <mn>2</mn><mo>)</mo></mrow>
</mrow>
MathML3 has specific linebreaking and alignment attributes which would in theory allow you to explicitly set an alignment point at the =
however your picture looks like a mobile device and I don't think there is a MathML3 implementation yet. It may be that marking up the rhs as above is sufficient, but if not the MathML2 way to specify alignment would be to use a one row table. Something like:
<math><mtable><mtr><mtd>
<mrow>
<msup>
<mrow>
<mo>(</mo>
<msup>
<mn>2</mn>
<mn>3</mn>
</msup>
<mo>)</mo>
</mrow>
<msup>
<mn></mn>
<mn>4</mn>
</msup>
</msup>
<mn>=</mn>
</mrow>
</mtd><mtd columnalign="left">
<mrow>
<mrow><mo>(</mo><mn>2</mn><mo>*</mo><mn>2</mn><mo>*</mo><mn>2</mn><mo>)</mo></mrow>
<mo>*</mo>
<mrow><mo>(</mo><mn>2</mn><mo>*</mo><mn>2</mn><mo>*</mo><mn>2</mn><mo>)</mo></mrow>
<mo>*</mo>
<mrow><mo>(</mo><mn>2</mn><mo>*</mo><mn>2</mn><mo>*</mo><mn>2</mn><mo>)</mo></mrow>
<mo>*</mo>
<mrow><mo>(</mo><mn>2</mn><mo>*</mo><mn>2</mn><mo>*</mo> <mn>2</mn><mo>)</mo></mrow>
</mrow>
</mtd></mtr></mtable>
</math>