javascript - Problems with jquery-ui droppable area

Question

I'm having some issues with my droppable area in my code. Everything is firing correctly and working as it should; however, the area in which I can effectively drop the numbered circles is not aligned correctly. It is hard to explain so here is the jsFiddle link below.

http://jsfiddle.net/sprink91/Fse2L/48/

The HTML code for the area that I would like to be droppable:

<div id="card_area">
  <div id="card1">
    <p class="shadow 1"></p>
    <p class="shadow 2"></p>
    <p class="shadow 3"></p>
  </div>
  <div id="card2">
    <p class="shadow 1"></p>
    <p class="shadow 2"></p>
    <p class="shadow 3"></p>
  </div>