为什么在导航栏后面没有显示我的文字?

我对这整个html / css事情很陌生。在查找了一些教程之后,我设法制作了一个基本的导航栏,但是现在的问题是我输入的任何文本都不会出现在导航栏下方。我想念什么吗?

HTML:

<!DOCTYPE html>
<html lang="en-us">
<head>
    <link href ="stylesheets/mainstyle.css"rel="StyleSheet" type="text/css">
    <title>books</title>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
</head>
<body>

    <nav>
        <ul>
            <li><a href="mainpage.html">Home</a></li>
            <li><a href="aboutpage.html">About</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
    </nav>
    <h1>hello there. testing</h1>
</body>
<script src="script.js" async defer></script>
</html>

CSS:

body{
    margin:0;
}

nav{
    position: fixed;
    top:0;
    width:100%;
    background-color:#f2bbac ;
    float: right;
    height:70px;
    font-family: 'Quicksand', sans-serif;
}
nav ul{
   list-style: none;
   padding:0;
   margin:0;
}
nav a{
    text-decoration: none;
    font-size: 20px;  
    color: white;
    text-transform: uppercase;
}
nav a:hover{
    color:gray;
}
nav li{
    display: inline-block;
    margin-left: 40px;
    padding: 20px;
}