Excercise Flexbox. Using flexbox is not responsive , why?

I am using some flexbox basics to try this website for example, and I positioned some things in the place but when I change the size of the page with the console , there is no responsive working.

I’m struggling with a basic responsive and basic html after days.

HTML:

<title>
    Vegan Cooking Retreat
</title>
<link rel="icon" type="favicon/x-icon" href="img/Vegan brocoli.png">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<header id="header">


    <h1> Vegan Cooking Retreat</h1>

    <nav id="menu">

        <p><a href="#mission">Mission</a></p>
        <p><a href="#news"> News</a></p>
        <p><a href="#teammates"> Teammates</a></p>
        <p><a href="#contacto"> Contact</a></p>


    </nav>
</header>


<main>
    <div id="mission">
        <h2>
            Mission
        </h2>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.


        </p>
    </div>

    <section id="news">

        <h2>
            News
        </h2>
        <section id="recipe">
            <div id="dishes">
                <h3>Appetizer</h3>
                <a href="#"><img src="../Maquetacion-Vegan/img/appetizer.jpg" alt="Appetizer" width="184px" height="400px"></a>
            </div>

            <div id="dishes">
                <h3>Main recipe</h3>
                <a href="#"><img src="../Maquetacion-Vegan/img/main.jpg" alt="Main" width="184px" height="400px"></a>
            </div>

            <div id="dishes">
                <h3>Dessert</h3>
                <a href="#"><img src="../Maquetacion-Vegan/img/dessert.jpg" alt="Desserts" width="184px" height="400px"></a>
            </div>
        </section>

    </section>

    <div id="teammates">
        <h2>Teammates</h2>
        <div id="catarina">
            <h3></h3>
        </div>
        <div id="camila">
            <h3></h3>
        </div>
    </div>

</main>

<footer>
    <div id="contacto">

    </div>
</footer>

CSS :

@font-face {
font-family: “Dancing Script”;
src: url(‘fonts/DancingScript-VariableFont_wght.ttf’);
font-weight: normal;
font-style: normal;
}

html {
font-size: 16px;
}

body {
background-color: #B8AC6C;
font-family: “Dancing Script”;
height: 1200px;

}

#header {
display: flex;
flex-direction: column;
background-image: url(…/img/20200310_183359.jpg);
background-position: center 40%;

}

#header h1 {
display: flex;
font-size: 4rem;
color: #383521;
justify-content: space-evenly;
margin: 0 auto;
}

#menu {
display: flex;
font-size: 2rem;
justify-content: center;
gap: 5rem;
}

#menu a {
color: #383521;
text-decoration: none;

}

#menu a:hover {
color: blue;

}

main {
color: #383521;
display: flex;
flex-direction: column;
}
#news{
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
align-items: center;
}

#recipe{
display: flex;

}

#dishes{
display: flex;
flex-direction: column;
align-items: center;
margin: 0px 40px;
}

Always i have the same problems, I study for weeks but when I reach Responsive I get completely lost.

I am just giving a suggestion, Instead of applying flex display property to every id respectively, You can use container class as flex and then apply flex properties to the flex items.