HTML Puzzle "Draw Line from Obj" does not fetch correct x,y of element

Hi

I just thought I would try the Draw Line puzzle and told it to draw to HTML element “D3Steps” right below the iFrame however it does not point anywhere near it and points off to the right edge.

            <!-- Web 3D iFRAME -->
            <div class="col-md-5">
                <div class="D3gltf-fancy" >
                    <div class="embed-responsive embed-responsive-1by1">
                      <iframe class ="embed-responsive-item" width="100%" height="100%" src="webgl/my_awesome_app.html" ></iframe>
                    </div>
                </div>
                <div class="text-muted" id="D3Steps">* Interactive content with Rotate, Zoom and Pan.</div>
            </div>
        </div>

I am using Flex with Bootstrap for the CSS and the iFrame class (apart from the bootstrap responsive part) is:

.D3gltf-fancy {
  flex: 1 1 500px;
  margin-bottom: 10px;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15)!important;
  display: block!important;
  border-radius: .25rem!important;
  border: 1px solid #dee2e6!important;
  width:450px;
  height:450px;
}