Making an image map responsive on a header

Hi Phil,

I have created an image map on a site’s header, and installed your plug-in to make it responsive. Something isn’t working and I’d like to ask for your opinion.

I created the image map code and replaced the header image code

<style type="text/css">
	.map_image { display: block; width: 1050px; height: 250px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
	.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
	.map_image #map_link_0 { width: 121px; height: 121px; top: 2px; left: 249px; }
	.map_image #map_link_1 { width: 120px; height: 122px; top: 1px; left: 384.9999694824219px; }
	.map_image #map_link_2 { width: 122px; height: 121px; top: 1px; left: 517.9999694824219px; }
	.map_image #map_link_3 { width: 121px; height: 122px; top: 1px; left: 655.9999694824219px; }
	.map_image #map_link_4 { width: 120px; height: 122px; top: 1px; left: 790.9999694824219px; }
	.map_image #map_link_5 { width: 123px; height: 121px; top: 1px; left: 924.9999694824219px; }
</style>
<div class="map_image" style="background-image: url('https://sallieborrink.com/wp-content/uploads/2014/04/SB-Header-Spring-Menu-Header-14.jpg');">
	<a class="map_link" id="map_link_0" title="" href="https://sallieborrink.com/category/learning-and-homeschooling/"></a>
	<a class="map_link" id="map_link_1" title="" href="https://sallieborrink.com/category/family-and-parenting/"></a>
	<a class="map_link" id="map_link_2" title="" href="https://sallieborrink.com/category/my-educational-products/"></a>
	<a class="map_link" id="map_link_3" title="" href="https://sallieborrink.com/category/working-from-home/"></a>
	<a class="map_link" id="map_link_4" title="" href="https://sallieborrink.com/category/faith/"></a>
	<a class="map_link" id="map_link_5" title="" href="https://sallieborrink.com/category/living-simply-and-frugally/"></a>
</div>

The site is at this link. When I change the browser width, the header image no longer is reponsive, but the rest of the site is. Your notes say that the plugin overides the image widths and makes them “100%”. I’m wondering if there is something I need to add or change to my image map code to work with your plug-in. Perhaps you can see something obvious that I’m missing.

Thanks for your time.

https://www.ads-software.com/plugins/responsive-image-maps/