点击浏览器的缩小按钮文本位置居中，但是banner的位置还是原来位置显示？

Question

为什么唯独只有banner位置没有居中？其他文本都居中了？不知是什么原理？
关于banner的sass

@at-root .bg{
        width: 100%;
        height: 300px;
        position: relative;
        z-index: 0;
        overflow: hidden;
        ul{     
            li{
                zoom:1; 
                vertical-align:middle;
                @at-root .banner{
                    width: 100%;
                    height: 300px;
                    display: block;
                    background:transparent url(../images/banner.jpg) no-repeat center center;
                }
            }
        }
    }