The element that isn't wrapping (the letters and the fixed width advert) won't wrap because they can't. The letters won't wrap on desktop either unless you apply the fix I gave because at present you have the html crushed together for those letters so that they form an unbroken long word (ABCDEFGHIJKLMNOPQRSTUVWXYZ). That will not wrap anywhere because there is no where for it to wrap unless you break the word.
Therefore the mobile looks at the widest element and scales that to fit in the window even though effectively that element has overflowed outside the container.
Its the same effect you get if you put a 750px width image alongside fluid text and as you close the window the text wraps but the image does not so imagine you carry on closing the window down to 320px. Now at 320px width the text has wrapped nicely but your image is still sticking out of the side of the viewport. The mobile therefore takes that layout and scales it to fit in the viewport resulting in the items that have wrapped being smaller and the items that stuck out now just fit inside the viewport. Effectively you have to ensure that nothing sticks out to avoid this happening.
What you need to do is as I said above and take control once you use the viewport meta tag and then you make sure that those letters wrap and you make sure you don't have fixed width elements in the page greater than 320px width (approx).
It's just basic mathematics and if something doesn't fit in the space available you must adjust it until it does.