A lot of people suggest that you truly understand what you can do with padding/margin before you rely on bootstrap. If anything you’ll be able to understand what goes on behind the scenes with bootstrap.
But for absolute-positioned elements I believe you’re supposed to use top/left instead of margin-top/margin-left. top/left defines its position based on the relative parent element whereas margin will move it from where it was when it was created.
You will also stand to benefit from using calc() if you want extreme accuracy. Calc can be used for something like:
left: calc(50% - 15px);
Spacing is important in calc! calc(50%-15px) will not work.
This will perfectly horizontally center a 30px wide element because it brings an entire element starting from the left 50% of its parents width, and then shifts it half its width backwards. You might use this for the Hello Kitty face provided they’re all wrapped together.
For your clock hands you don’t even need calc. I imagine you’d need top: -50% and left: 50% or values very close to those.
Coincidentally I have an old fork of a prototype sun I was making. I wasn’t trying to make a sun dial but the design turned out similar to a clock.
For simplicity I also recommend sizing children with the same sizing unit as their parents.