Site Header

typography.css

.site-name {
  --link-text-decoration-line: none;
  font-size: var(--site-name-font-size);
  line-height: var(--site-name-line-height);
}

page.twig

<header role="banner">
  {{ page.header }}
  {{ page.menu }}
   <div class="menu-toggle">
   </div>
</header>

page.css

header[role="banner"] {
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
}

The header element uses display: flex and justify: space-between to push space out the header and menu regions.

The menu region provides a responsive mobile menu. Or you can put menus into the header region, which is also flex with space-between.