Menu responsivo ordem errada | HTML e CSS | Alura

Oi, pessoal! Tudo bem? Estou estudando menus responsivos, cada sessão do meu site coloquei dentro de uma section, porem no mobile, quando clico no menu, ele abre depois das próxima sessão, alguém porque isso acontece?

O código ainda ta meio bagunçado porque ainda estou aprendendo como organizar o projeto, mas isso é algo que sempre acontece e nunca entendo o motivo, já fui aquivo por aquivo olhar e não achei o motivo

HTML

<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TITULO DO SITE </title>

    <link rel="stylesheet" type="text/css" href="main.css" media="screen">
    <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">

</head>

<body>


    <!--Header section with menu-->
    <section class="menu-topo">

        <header class="display-flex">
            <!--logo-->
            <div class="logo">
                <img src="img/logo.svg">
                <a href="#">
                    <h1> DeveloPoc: /></h1>
                </a>
                <!--Responsive-ico-->
                <i class="fa fa-bars" aria-hidden="true"></i>
            </div>
            <!--Menu items-->
            <nav>
                <ul class="menu desativa">
                    <li class="item-menu"><a href="#">Home</a></li>
                    <li class="item-menu"><a href="#">Sobre</a></li>
                    <li class="item-menu"><a href="#">Serviços</a></li>
                    <li class="item-menu"><a href="#">blog</a></li>
                    <li class="item-menu-buy"> Contato </i></li>
                </ul>
            </nav>
        </header>
    </section>

    <section>

        TESTE DO TEXTO
    </section>





    <script src="https://kit.fontawesome.com/11a8eb6726.js" crossorigin="anonymous"></script>
    <script src="content/css/header.js" crossorigin="anonymous"></script>


</body>

</html>

CSS MAIN

@import '/content/css/header.css';
@import '/content/banner-top.css';
@import '/content/css/responsive.css';

*{
    margin: 0px;
    padding:0px;
    text-decoration: none;
    font-family: 'Hind Siliguri', sans-serif;
}

h1,h2,h3,h4,h5,h6,a{
        color:#0061f2;
        font-weight: 400;
}

header.css

/*Menu - Primeiro bloco */
.menu-topo, header{
    background-color: #ff01cd;
}

header{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0em 1em;
    max-height: 70px;
    max-width: 1200px;
    margin: auto;
    font-size: 0.8rem;
}       


        header .logo img{
            width: 70px;
            margin-left: -30px;
        }

        header .logo img{
            width: 70px;
            margin-left: -30px;
        }
        header .logo h1{
            font-size: 1rem;
            color: #fff;
        }

        header ul{
            display: flex;
            width: 100%;
            list-style: none;
        }

        header ul a {
            padding: 1em;
            color:#fff;
        }

        header .logo{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        header .logo i{
            color: #fff;
            display: none;

        }

        header nav{
        }


        header nav .item-menu-buy{
            background-color: #fff;
            padding: 1px 30px;
            border-radius: 30px;
            color:#ff01cd;
        }

Responsive.css

@media screen and (max-width: 800px) {

.display-flex {
    display: flex;
}

.flex-direction-row {
    flex-direction: row;
}

.flex-direction-col {
    flex-direction: column;
}

/*header csss*/

header {}

/*header  box logo */
header .logo {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-left: 0px;
}

header .logo i {
    color: #fff;
    display: flex;
}

header .logo img {
    margin-left: 0px;
}


/*header  box nav*/
header nav {
    width: 100%;
}

header ul {
    flex-direction: column;
    background-color: #fff;
    color: black;
    width: 100%;
}

header nav ul a {
    color: black;
    width: 100%;
}

header nav ul li {
    padding: 1em;
    width: 70%;
}


/*resposivo animações */
header .desativa {
    display: none;
}

}

Chegou a hora de transformar