mainText was strictly 900px so the floated #social of 300px fit within the 1200px wide #content, and it did not affect text wrapping for #mainText. 900+300 = 1200, perfect fit, floating here is just for positioning, not wrapping.
DOM order: in the original DOM order #social would have never wrapped text from #mainText because it was the last element and floated right. I have reordered the DOM structure for you.
shape-outside radius: increased to 150px to make it wrap nicely. 100px radius caused text overlap.
optional, commented-out 1200px width on #content to see live wrapping around shape-outside with page resize.