Things are in different locations once published

Seriously ticking me off…

During the design process things line up as i want them.

Once i hit publish and push the design to my live page everything is misaligned, what’s going on?

This is how i want it.

And this is how it comes out once published.

It’s done it to everything not just this one example.