我的导航菜单不适用于移动设备

Question

这是我的＆lt; nav＆gt;代码，这些链接可以在桌面和平板电脑上运行，但由于某些原因它们无法在移动设备上运行。

<nav>
    <ul>
        <li class="col-xs-12 col-sm-3 col-md-3 col-lg-3"><a href="index.html">Home</a></li>
        <li class="col-xs-12 col-sm-3 col-md-3 col-lg-3"><a href="About.html">About</a></li>
        <li class="col-xs-12 col-sm-3 col-md-3 col-lg-3"><a href="Contact.html">Contact</a></li>
        <li class="col-xs-12 col-sm-3 col-md-3 col-lg-3"><a href="Donate.html">Donate</a></li>
    </ul>
</nav>

这是我用于导航栏的CSS。

nav { 
    font-size: 200%;
    text-align: center;
    margin-left: -10%; 
    padding-bottom: 10%;
}
nav li {
    list-style-type: none;
}

你能明白为什么它不起作用吗？我已经查了很多，尝试了很多像添加z-index：1但它不会起作用。请帮助和谢谢。