Fixed nav bar

by Bryan Waddington

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>
    <div id="content">
      <h1>hello there. testing</h1>
    </div>
</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;
}

#content {
  margin-top: 70px; /* at least the height of you nav bar */
}