锚背景图像只有在放入div

Question

锚点都有“跨越”的范围。用css中的背景图像替换它们。我遇到的问题是当锚被放置在div中时它们会消失。

HTML code：

<nav>
    <h1 class="hidden"><span>Menu</span></h1>
    <div>
        <a class="social-media bg-img-facebook" href=""><span>Facebook</span></a>
        <a class="social-media bg-img-instagram" href=""><span>Instagram</span></a>
        <a class="social-media bg-img-twitter" href=""><span>Twitter</span></a>                    
    </div>
    <a class="logo" href="index.html"><span>logo</span></a>
</nav>

CSS代码：

nav{
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo{
    background-image: url('../assets/img/logo.png');
    width: 14.8rem;
    height: 3.6rem;
}
.logo span{
    display: none;
}
.social-media{
    width: 2.4rem;
    height: 2.4rem;
    background-repeat: no-repeat;
}
.social-media span{
    display: none;
}
.facebook-link{
    background-image: url('../assets/img/facebook-icon.png');
}
.instagram-link{
    background-image: url('../assets/img/instagram-icon.png');
}
.twitter-link{
    background-image: url('../assets/img/twitter-icon.png');
}

3个锚点都出现在div之外。就像a.logo出现一样。

感谢您的帮助。