Absolute positioned animated child div goes out of its parent's boundary, how to fix it?

Issue

I am animating left position of an absolutely positioned child div within its parent div. The animation though does work but when child div reaches at 50% (50% {left:100%;}, it goes out of its parent's boundary.

A.) Why does it happen only for left: 100% and not for 0%?

B.) How to keep child moving within parent - not going out of parent on right hand side?

Here's my code:

#parent {
  border:1px solid red;
  width:500px;
  height:200px;
  margin:100px auto;
  position:relative;
}

/* The element to apply the animation to */
#child {
  width:100px;
  height:100px;
  border:1px solid blue;
  position:absolute;
  -webkit-animation:animatedPos 20s linear infinite;
  -o-animation:animatedPos 20s linear infinite;
  -moz-animation:animatedPos 20s linear infinite;
  animation:animatedPos 20s linear infinite;
}

/* The animation code */
@-webkit-keyframes animatedPos {
  0% {left:0%;}
  50% {left:100%;}
  100% {left:0%;}
}

@-o-keyframes animatedPos {
  0% {left:0%;}
  50% {left:100%;}
  100% {left:0%;}
}

@-moz-keyframes animatedPos {
  0% {left:0%;}
  50% {left:100%;}
  100% {left:0%;}
}

@keyframes animatedPos {
  0% {left:0%;}
  50% {left:100%;}
  100% {left:0%;}
}

<div id="parent">
  <div id="child"></div>
</div>

Solution

Change

@keyframes animatedPos {
  0% {left:0%;}
  50% {left:100%;}
  100% {left:0%;}
}

to

*{
  box-sizing:border-box;
}
@keyframes animatedPos{
  0%{
    left:0;
  }
  50%{
    left:calc(100% - 100px);
  }
  100%{
    left:0;
  }
}

Answered By - StackSlave