Div falling out of position on rotate - html

Question

I have made an analogue clock like so that shares 1 parent div space with 2 other divs:
.left {
vertical-align: top;
width: 27%;
overflow: hidden;
display: inline-block;
}
#picLeft {
height: 100%;
width: 100%;
}
.container {
vertical-align: top;
position: relative;
display: inline-block;
width: 16.7%;
}
.clock {
vertical-align: top;
width: 100%;
height: 100%;
position: relative;
display: inline-block;
}
.hands {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hands-cl {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
vertical-align: top;
}
.right {
vertical-align: top;
width: 52.2%;
height: 100%;
overflow: hidden;
display: inline-block;
}
.picRight {
width: 100%;
height: 100%;
}
<div class="header-logo">
<div class="left">
<img id="picLeft" src="TIDleft.png">
</div>
<div class="container">
<div class="clock">
<img class="hands" src="TidClockFace.png">
<img id="hourHand" class="hands-cl" src="hourHand.png">
<img id="minuteHand" class="hands-cl" src="hourHand.png">
</div>
</div>
<div class="right">
<img class="picRight" src="TIDright.png">
</div>
</div>
This is what happens:
As You can see it looks ridiculous.
I don't know if the problem is in the rotation or the image size since the divs shrink the images to fit the part of the website.
This is the third day I have been persistently searching for the answer. No stackoverflow threads are similar, and I have run out of ideas for search terms.
I hope this question is asked properly, and enough info has been given.
If not though, don't hesitate to ask for something or correct me.