Hotspots shifting location on image

Hi, I am trying to place hotspots on an image and they don't seem to be in the location where i placed them originally. I've tried changing the width and height to pixel sizes and that didn't work. Any ideas?

<div class="section">

   <div class="container">

       <div class="row">

           <div class="twelve columns" id="Map">        

          <img src="BG/Tidal Bay-01.png" width="100%" height="auto" usemap="#Map" align="middle" border="0">

         <map name="Map">    

           <area shape="rect" coords="595,460,749,520" href="index.html" target="_blank" alt="Sealers">

         </map>

         </div>

       </div>

     </div>

</div>