Because you’ve removed the explicit height from #scaleable-wrapper.
translate(-50%, -50%) is part of a vertical and horizontal centring technique that works in conjunction with
top: 50%; left: 50%; on .very-specific-design. You can see that in Chris’ original demo.
In your modified demo, with the height gone from #scaleable-wrapper,
top: 50%; on .very-specific-design becomes redundant. It will effectively default to
top: 0;. The problem there is that
translate(-50%, -50%) is still doing its thing on the horizontal and vertical, pulling it back half way along its width and height. You want it to do that on the X axis but not the Y axis, so, changing it to
translate(-50%, 0) will only make the centering happen horizontally.