导航栏突然在顶部而不是底部HTML

Question

My navbar was fine and fixed at the bottom, until I added a link to the google font API and an additional font option in the html. I commented out everything I changed, then I deleted it, but nothing has worked. The navigation should be exactly as it is, just at the bottom. Here is my html:

<div class="navbar">
<nav>
    <a href="otherpage.html">Blog</a>
    <a href="otherpage.html">Linguistics Facts</a>
    <a href="otherpage.html">More About Me</a>
</nav>
</div>


</body>
</html>

Here is my CSS:

.navbar {
    position: relative;
    bottom: 0;
    width: 100%;
    list-style: none;
}

.navbar a {
    float: center;
    display: block;
    text-align: center;
    padding: 10px 12px;
    margin: 15px; /*experimental*/
    background-color: #f7b733;
    color: white;
    font-family: 'PassionTea', 'Amatic SC';
    font-size: 170%;
    list-style-type: none;
}

Answer 1

.navbar{
    position:fixed;
    bottom:0;
    width:100%;
    height: desired height;
}

To stick your menu to the bottom of your viewport you need to set position fixed not relative.You don't need list-style:none; because you don't have any list on the nav tag.