html {
  height: 100%;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

section {
  display: flex;
  outline: 1px solid black;
  margin: 4em auto;
  padding: 0;
}

h1 {
  flex-basis: 33.333%;
  /* Allocate 1/3 of the space to h1 */
  display: flex;
  /* Use flexbox to center h1 */
  justify-content: center;
  /* Center horizontally */
  align-items: flex-start;
  /* Center vertically */
  text-align: center;
  /* Center the text inside h1 */
  background-color: olive;
  padding: 5% 0 0 0;
  margin: 0;
}

.content {
  flex-basis: 66.666%;
  /* Allocate 2/3 of the space to the content */
  display: flex;
  flex-direction: column;
  /* Stack content vertically */
  justify-content: flex-start;
  /* Align content to the top */
  align-items: flex-start;
  /* Align content to the left */
  padding: 20px;
  /* Add some padding around the content */
}

/* Additional Styling */
section,
h1,
.content {
  box-sizing: border-box;
  /* Include padding and border in the element's total width and height */
}

#logo {
  width: 50%;
}

nav {
  display: flex;
}

nav ul li {
  margin: 0 0.5em;
}

nav ul {
  list-style-type: none;
  display: flex;
}

main {
  max-width: 1200px;
  display: flex;
  flex-direction: column;
}