limit a div only to its own parent

[Rec0rd]

I'm doing this output and it's already running like I wanted it to. This is like moving a \[code\]div\[/code\] using arrows keys, but my problem is when I press arrows key to move, the color grey \[code\]div\[/code\] surpasses its own parent \[code\]div\[/code\]. What I want to achieve is that the grey \[code\]div\[/code\] would not be able to step outside its parent \[code\]div\[/code\] (that has a red border), even if I continually press arrow keys.This is demo jsFiddleAny help?