Button link in navigation not working well - can I change its hotspot size?

Site URL: http://www.miriambos.com

Hi there,

I wonder if anyone can help me with this issue?
A little while ago, I changed the extra link in my navigation bar into an image.
But there is only a very small area (I believe it's like only 1 pixel) that people can click on to use the link. It's supposed to link to my shop. If you hover it for a while, there's a chance you'll find that one pixel, showing the 'clicking hand' icon. But for most people it will seem that the button isn't working.

I'm not sure if it's the 'hot spot' part that needs enlarging somehow. Is there a custom css I can add to make the whole image clickable?

Currently, I'm using this code below that I found on this forum:
It works, except that the hotspot is probably too small and not using the image area to click.

/* Join button Desktop */
.header-actions-action--cta {
    background-image: url(https://images.squarespace-cdn.com/content/v1/5ea2ece99c62cc1c1c322a6c/da9bab42-3bce-47bd-87a1-b3d6f1e99cff/miriam-bos-copyright-shop-icon-shopify.jpg);
    background-size: contain;
    background-repeat: no-repeat;   
    padding: 2em;   
}

.header-actions-action--cta  .btn {
  background-color: transparent !important;
  border-color: transparent !important;
  display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding: 2em;     
   margin: -2em; 
}
.header-menu-cta .btn:hover,
.header-actions-action--cta:hover {
  opacity: 0.7;
}

Can someone advice or help? 
Thanks SO much in advance!

Best,

Miriam

Oh wow! This worked instantly. Thanks so much @creedon!
That made my day!