ChrisjChrisj, I believe you've been asked several times to post your code in the form of a "working page" (or post a link to your site) so we can see what you see. Posting invalid snippits is annoying at least and useless at worse.
PLEASE post your code in the form of a working page - starts with doctype, contains a head section with usable CSS, a body section with valid HTML, and ends with close html.
Why is the CSS for the spans written inline instead of in the CSS???
Where is our copy of the light bulb image?
This "issue" seems to be a case of expectations vs the actual media query width.
Add the following outline to the .box8 CSS.
outline:1px solid red; /* ADD Me */
padding:0px 8px 0px 8px;
margin:1px 2px 0px 2px;
Validate your code then try the following test...
Vary the width of the desktop view (measure the browser width when the change occurs) then compare that to the width of the wide view of the mobile device. See what you think
I do not have an iThing on which to test so please let us know what you find.
EDIT: the width of the left and right boxes, therefore the placement of the center box with the light bulb, depends on the amount of text in the end boxes.