Try it Yourself: CSS Website Layout

CSS Website Layout

<!DOCTYPE html>
<html>
<head>
<style>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}
</style>
</head>
<body>

<header>
  <div class="logo">Site</div>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}
</style>
</head>
<body>

<header>
  <div class="logo">Site</div>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

</body>
</html>