Titel verschiebt sich durch Navbar

[Rolf B]

Hallo Robert,

ja, das und noch viel mehr. Die Menü-Links sollten auch eine Liste sein.

<header>
  <nav>
    <ul>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Regelwerk</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">Info</a></li>
    <li><a href="#">Discord</a></li>
    </ul>
  </nav>
  <h1>NewFamily<br>State</h1>
  <p>Werde jetzt ein Teil der Community</p>
</header>

Ob man den <br> in der H1 braucht, weiß ich nicht so recht. Wenn genug Platz ist, warum soll es dann zweizeilig sein? Aber wenn das Community-Logo so sein soll…

Minimales Styling wäre dann

header {
  background-color: #bff;
  contain: layout;   /* Margin vom p Element im header halten */
  text-align: center;
}
header nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: end;
}
header nav li {
  padding: 0.1em 0.4em;
}
h1 {
  margin-top: 0em;
}

Die Angabe contain:layout ist nicht unbedingt nötig, nur wenn die Hintergrundfarbe außerhalb des Headers wechselt, sollte man das machen. Sonst ist das p Element wegen der collapsing margins möglicherweise ganz an den Rand des header geklatscht.

Rolf