Body appearing in header?

This block:

<header>
    <div id="header">
        <h1 class="title">brookfield corp</h1>
        <nav class="top-nav">
            <ul>
                <a href="#recent"><li>recent</li></a>
                <a href="#samples"><li>samples</li></a>
            </ul>
        </nav>
    </div>
</header>

Needs to move within

<body> </body>

Then you could continue, before closing </body> tag, with <div id="body"> or similar, following your <header></header> block.

Your <header> needs to be inside your <body>. Then have a <div> for you main content.

<!DOCTYPE html>
<html>
    <head>

        <link href="flex.css" rel="stylesheet" type="text/css">

        <link href="https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500">

    </head>
    
    <body>
        <header>
            <div id="header">
                <h1 class="title">brookfield corp</h1>
                <nav class="top-nav">
                    <ul>
                        <a href="#recent"><li>recent</li></a>
                        <a href="#samples"><li>samples</li></a>
                    </ul>
                </nav>
            </div>
        </header>

        <div class="main">
            <h2>recent</h2>
        </div>
    </body>

</html>

Remove absolute position from .title

I also fixed up your body tags. All your content should be inside these tags

HTML:

<!DOCTYPE html>
<html>
    <head>

        <link href="flex.css" rel="stylesheet" type="text/css">

        <link href="https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500">

    </head>
<body>
    <header>
        <div id="header">
            <h1 class="title">brookfield corp</h1>
            <nav class="top-nav">
                <ul>
                    <a href="#recent"><li>recent</li></a>
                    <a href="#samples"><li>samples</li></a>
                </ul>
            </nav>
        </div>
    </header>

    
        <h2>recent</h2>
    </body>

</html>

CSS:

html {
    box-sizing: border-box;
}

.title {
    font-family: 'Frank Ruhl Libre', serif;
    text-align: center;
    font-size: 4em;
    background-color: hsla(140, 50%, 30%, .9);
    color:cornsilk; 
    padding: 30px 0px 30px 0px;
    margin: 0 auto;
    height: 100px;
    width: 100%;
    top: 0px;
    left: 0px;
}

nav {
    font-family: 'Frank Ruhl Libre', serif;
    float: right;
    text-decoration: none;
}

li {
    color: black;
    list-style: none;
    display: inline;
    opacity: .7;
    text-decoration: none;
}