Make the margin not clickable

Question

I'm very new to css, I can usually work stuff out using trial and error but this one has me stumped. I'm using a sprite page to show categories on my home page.

The html is

<div id="sprite2">
    <a style="display:inline-block" href="https://www.subscriptionboxaustralia.com/product-category/adults-sex-toy-subscription-boxes/"><div class="sprite2" id="adults-boxes"></div></a>
    <a style="display:inline-block" href="https://www.subscriptionboxaustralia.com/product-category/arts-crafts-creative-subscription-boxes/"><div class="sprite2" id="arts-boxes"></div></a>
    </div>

And the css is

    .sprite2 {
    background-image: url(https://www.subscriptionboxaustralia.com/wp-content/themes/accesspress-store/images/Subscription-categories-spritesheet.png);
    background-repeat: no-repeat;
display:inline-block;

}

#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    margin-left: 120px
    }


#arts-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -94px;   
    margin-left: 70px
}

As you can see the margin around each image is clickable? How can I fix this, I've read a load of posts, but I can't seem to apply the concepts to my own code.

www.subscriptionboxaustralia.com

**UPDATE The first given answer works perfect for dekstop, thanks so much!!!! Only issue is now its throwing off my mobile styling

@media (max-width: 480px) {
#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    transform: scale(.8);
    margin-left: -33px;}}

@media (min-width: 481px) {
#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;}}

Ive was using this to shrink the image for mobile, and the image was sitting to the right for some reason so i was using the -33px to have it sit at the left hand edge, now its pushed over to the right again? any ideas oh wise css yodas? =)

Answer 1

You have provided margin to child element sprite2 instead of that provide margin to you a tag which will give you margin but not clickable. Check snippet.

    .sprite2 {
    background-image: url(https://www.subscriptionboxaustralia.com/wp-content/themes/accesspress-store/images/Subscription-categories-spritesheet.png);
    background-repeat: no-repeat;
display:inline-block;

}

#adults-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -15px;
    }


#arts-boxes {
    width: 425px;
    height: 49px;
    background-position: -15px -94px;   
}

<div id="sprite2">
    <a style="display:inline-block; margin-left: 120px" href="https://www.subscriptionboxaustralia.com/product-category/adults-sex-toy-subscription-boxes/"><div class="sprite2" id="adults-boxes"></div></a>
    <a style="display:inline-block; margin-left: 70px;
" href="https://www.subscriptionboxaustralia.com/product-category/arts-crafts-creative-subscription-boxes/"><div class="sprite2" id="arts-boxes"></div></a>
    </div>