JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <h1>
    <img src="https://picsum.photos/110/110" width="110" height="110" alt="Header Image">
    <span>The Tabletop Guild</span>
  </h1>
  <nav class="sitenavigation">
    <a href="index.html">Home</a>
    <a href="booking.html">Online Booking</a>
    <a href="photo.html">Photo Gallery</a>
    <a href="directions.html">Directions</a>
    <a href="feedback.html">Feedback</a>
  </nav>
</header>

CSS

body {
  background: #0B2A42;
  margin: 0;
}

a {
  text-decoration: none;
}

h1 {
  font-size: 45px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background-color: #0B2A42;
  color: #fff;
  padding: 0;
  margin: 0;
}

nav.sitenavigation {
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

nav.sitenavigation a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  background: #fff;
  padding: 10px 20px;
  border-radius: 20px;
}

header {
  padding: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  font-size: 70px;
  font-weight: bold;
}