That little bit of movement is why I added the extra width. Because the panel widths are percentages there's a bit of fluctuation during the animation as the percentages get rounded to pixels and sometimes the fourth panel will drop under the others because the floats collide. I compensate for that with a negative left margin on each panel so they overlap a bit, leaving a bit of space on the right for those extra pixels to expand into. This offsets the whole thing a little to the left, so you'd think I could position it a few pixels to the right to get it back to center. But alas, <code>.accordion</code> is still in a container that is too narrow and we still get occasional float-drop.

So it's totally hacky, but I got around it by making <code>.accordion</code> wider than its container so the panels have even more room to grow, which instead offsets it a bit to the right. <code>left: -1%;</code> would be dead center, except for that negative left margin... so half a percent plus the negative margin is more-or-less optically centered, at least enough that it doesn't look too badly offset unless you overlay a grid.

I suppose I could solve a lot of this with some flex-box or even just using a border-box model, and I may still tinker with that as the page evolves, but this bit of hackery seems to work for now.