按钮的媒体查询出现问题

Question

所以我在我正在设计的一个网站上实现了一个按钮，一个圆圈内的双角向上箭头，它允许用户快速滚动回顶部：

现在我有一个媒体查询，它应该缩小屏幕上小于 767 像素的圆圈和箭头。但是，圆圈​​和箭头最终分开：。

圆圈缩小，但箭头移出屏幕？我不明白为什么。

代码（“#toTop”是圆圈）：

    #toTop{
        position: fixed;
        bottom: 10px;
        right: 10px;
        cursor: pointer;
        display: none;
    }
    #toTop .fa {
        margin: 5px;
    }
    @media(max-width:767px) {
    #toTop{
        position: fixed;
        height: 30px;
        width: 30px;
        bottom: 10px;
        right: 10px;
        cursor: pointer;
        display: none;
    }

    #toTop .fa {
        font-size: 0.5em;
    }        
    }

Answer 1

我通过删除圆圈解决了我的问题。