Twenty Eleven Footer Widgets Not Stacking Correctly on iPad

I’m pretty new at this, so I apologize if there’s an obvious answer. I’m using the 3 footer widgets in a twenty eleven child theme as my footer. They look great on a computer and stack correctly, one on top of the other, on an iPhone, but when I look on an iPad, the widgets stack kind of like a staircase. I’ve tried making them not stack at all, adding some CSS under @media (max-width: 800px) that says

/* keep floating footer widgets at this size */
#colophon #supplementary .widget-area {
		float: left;
		width: 33%;
	}
}

(found that CSS thanks to these forums), but they continue to staircase stack.
The website is here: https://www.meltonbarker.org and here is a picture of what the incorrectly-stacking widgets look like. I really appreciate any help. Thanks!