材质css中的浮动按钮问题

Question

我设计了一个侧面导航栏，但是浮动按钮和文本无法正常工作。浮动按钮CSS无法正常工作。我也面临着圆形图像的一些问题。即使使用圆形类，它也总是呈椭圆形。

将视图作为图像附加。

侧面导航栏html：

<ul id="slide-out" class="side-nav fixed invesible-top ">
        <li>
            <div class="user-view">
                <div class="background">
                    <img
                        src="">
                </div>
                <a href="#user"><img class="circle"
                        src=""></a>
                <a href="#name"><span class="white-text name">John Doe</span></a>
                <a href="#email"><span class="white-text email">Publisher</span></a>
            </div>
        </li>
        <li><a href="#!"><i class="material-icons teal-text">person</i>My Profile</a></li>
        <li>
            <div class="divider"></div>
        </li>
        <li><a class="waves-effect" href="#!"><i class="material-icons teal-text">edit</i>Edit Profile</a></li>
        <li>
            <div class="divider"></div>
        </li>
        <li><a class="waves-effect btn-floating red small" href="#!"><i class="material-icons white-text">add</i>Test</a></li>
        <li>
            <div class="divider"></div>
        </li>
        <li><a class="waves-effect " href="#!"><i class="material-icons teal-text">add</i>Create Page</a></li>
        <li>
            <div class="divider"></div>
        </li>
        <li><a class="waves-effect " href="#!"><i class="material-icons teal-text">event</i>Create Event</a></li>
        <li>
            <div class="divider"></div>
        </li>
        <li><a class="waves-effect " href="#!"><i class="material-icons teal-text">call</i>Invite People</a></li>
        <li>
            <div class="divider"></div>
        </li>
        <li><a class="waves-effect " href="#!"><i class="material-icons teal-text">power_settings_new</i>Sign Out</a></li>
    </ul>

样式是：

 @media only screen and (min-width : 992px) {
    .invesible-top {
      top: 105px;
    }
  }