<header>
  <h1>Mon site</h1>
  <nav>
    <a href="#section1">lien 1</a>
    <a href="#section2">lien 2</a>
  </nav>
</header>
<section id="section1">
  <h2>Section 1</h2>
  <p>Contenu de la section 1...</p>
</section>
<section id="section2">
  <h2>Section 2</h2>
  <p>Contenu de la section 2...</p>
</section>

* {
  box-sizing: border-box;
}

/*on defini une variable definissant la taille du header*/
:root {
  --hauteur-header: 50px;
}

body {
  margin: 0;
  padding: 0;
}

/*style des liens*/
nav {
  display: flex;
  gap: 10px;
}
nav a {
  text-decoration: none;
  color: yellow;
}

/*style du header*/
header {
  position: sticky; /*pour rendre le header fixe*/
  top: 0;
  width: 100%;
  height: var(--hauteur-header); /*on utilise cette variable*/
  background-color: #333;
  color: white;
  text-align: center;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

/*styles des sections*/
section {
  min-height: 100vh; /*pour simuler du contenu*/
  color: black;
}
section h2 {
  margin-top: 0;
}
#section1 {
  background-color: green;
}
#section2 {
  background-color: red;
}