<header class="header">
  <div class="header__wrapper">
    <a class="logo" href="#">Logo</a>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

<section>
  <h1>Article title</h1>
  <p>Some desc</p>
</section>
:root {
  --wrapper: 700px;
  --wrapper-padding: 1rem;
  --space: max(
    1rem,
    calc((100% - calc(var(--wrapper) - var(--wrapper-padding) * 2)) / 2)
  );

  /* No calc() version
  --space: max(
    1rem,
    100% - (var(—-wrapper) - ((var(—-wrapper-padding) * 2) / 2))
  );*/
}

section {
  padding: 2rem 1rem 2rem var(--space);

  background-color: darken(lightblue, 5%);
  max-width: calc(600px + var(--space));
  border-bottom-right-radius: 50px;
}

h1 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.header {
  background-color: lightblue;
}

.header__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--wrapper);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wrapper-padding);
  padding-right: var(--wrapper-padding);
}

.logo {
  font-weight: bold;
  font-size: 1.5rem;
}

nav ul {
  display: flex;
  gap: 1rem;
}

nav a {
  display: block;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

a {
  text-decoration: none;
  color: #222;
}

body {
  font-family: "Arial";
}

* {
  box-sizing: border-box;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.