Adding Sticky Position on Navbar

Hi

I’m a beginner in HTML and CSS and currently trying to make a sticky position on my navigation bar. I want to have my header, the nav, and then when you scroll down the nav sticks to the bottom and you can no longer see the header.

This is my code below:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Elle and Belle Design</title>
</head>

<body>

<div class="header">
    <h1>Elle and Belle Design</h1>
    <p>Bespoke Handmade Headbands and Accessories</p>
</div>
<nav class="main-nav">
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="aboutus.html">About Us</a></li>
        <li><a href="products.html">Our Products</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</nav>

<div class="mainbody">

<div class="updates">
    <p>these are my updates</p>
</div>

<div class="section-1">
    <p>this is my section</p>
    <div class="fakeimg">Image</div>
</div>
</div>

<div class="footer">
    <h2>Footer</h2>
</div>
</body>
</html>

and this is my CSS:

* {
    box-sizing: border-box;
}

h1 {
    font-family: 'Arial';
    font-size: 50px;
}

p {
    font-family: 'Arial';
}

.header {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
}

body {
    margin: 0;
    background:whitesmoke;
    font-family: 'Arial';
    font-weight: 300;
}

.main-nav {
    display: flex;
}

.main-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: sticky;
    position: -webkit- sticky;
    background-color: paleturquoise;
    top: 0;
    width: 100%;
}

.main-nav li {
    float: left;
}

.main-nav li a {
    display: block;
    padding: 20px 50px;
    text-decoration: none;
    color: black;
    text-align: center;
    font-family: 'Arial';
}

.main-nav li a:hover {
    background-color: turquoise;
}

.mainbody {
    display: flex;
    flex-wrap: wrap;
}

.updates {
    flex: 30%;
    background-color: lightgrey;
    padding: 20px;
}

.section-1 {
    flex: 70%;
    background-color: lightgrey;
    padding: 20px;
}

.fakeimg {
    height: 200px;
    width: 50%;
    padding: 20px;
    background-color: yellow;
}

.footer {
    padding: 20px;
    text-align: center;
    background: paleturquoise;
}

@media screen and (max-width: 600px) {
    .main-body {
        flex-direction: column;
    }
}

Is anyone able to tell me where I am going wrong please?

Thanks
Mary