No containers needed in CSS, do it with grid, inspiration from here: https://ryanmulligan.dev/blog/layout-breakouts/

css

.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 900px;
  --breakout-max-width: 1200px;

  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;

  display: grid;
  grid-template-columns: inherit;
}

img.full-width {
  width: 100%;
  max-height: 45vh;
  object-fit: cover;
}

:root {
  --color-scheme: dark;

  --font-family: system-ui;

  --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
  --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
  --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
  --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
  --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
  --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
  --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);

  --clr-primary-300: hsl(219, 76%, 55%);
  --clr-primary-400: hsl(219, 76%, 40%);
  --clr-primary-500: hsl(219, 76%, 25%);
  --clr-secondary-300: hsl(269, 75%, 55%);
  --clr-secondary-400: hsl(269, 75%, 40%);
  --clr-secondary-500: hsl(269, 75%, 25%);
  --clr-accent-200: hsl(358, 85%, 80%);
  --clr-accent-300: hsl(358, 72%, 65%);
  --clr-accent-400: hsl(358, 72%, 50%);
  --clr-accent-500: hsl(358, 72%, 35%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: var(--color-scheme);
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--fs-400);
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

.site-title {
  font-size: var(--fs-900);
  line-height: 1.05;
  text-transform: uppercase;
}

.section-title {
  font-size: var(--fs-800);
  line-height: 1.1;
}

.bg-primary {
  background: var(--clr-primary-500);
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.call-to-action {
  padding: 1rem;
  background: hsl(0 0% 100% / 0.15);
}

.wrapper {
  width: calc(100% - 3rem);
  max-width: 900px;
  margin-inline: auto;
}

.flow > * + * {
  margin-top: var(--flow-spacing, 1em);
}

.section-padding {
  padding-block: 2.5rem;
}

.primary-header {
  padding-block: 1rem;
  margin-block-end: 3rem;
  background: var(--clr-accent-200);
  color: var(--clr-primary-500);
}

.primary-header__layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  max-width: 250px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: max(5vw, 1rem);
}

nav a {
  color: inherit;
  text-decoration: none;
}

nav a:hover,
nav a:focus {
  color: var(--clr-accent-500);
  text-decoration: underline;
}

.even-columns {
  display: flex;
  gap: 1rem;
}

html

<header class="primary-header content-grid">
  <div class="primary-header__layout breakout">
    <svg class="logo" id="logo-10" width="163" height="42" viewBox="0 0 163 42" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M30.21 17.719C33.348 17.719 34.054 19.082 34.054 20.782C34.054 22.584 33.2 23.875 30.223 23.875C27.265 23.875 26.41 22.659 26.41 20.782C26.41 18.935 27.342 17.719 30.21 17.719Z" class="ccustom" fill="#394149"></path>
      <path d="M63.004 17.719C66.142 17.719 66.848 19.082 66.848 20.782C66.848 22.584 65.993 23.875 63.017 23.875C60.06 23.875 59.204 22.659 59.204 20.782C59.204 18.935 60.136 17.719 63.004 17.719Z" class="ccustom" fill="#394149"></path>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M2.42676 38.5V3.047H161.005V38.5H2.42676ZM78.0048 36.5H159.005V5.047H78.0048V36.5ZM30.225 26.893C35.796 26.893 38.138 24.49 38.138 20.737C38.138 16.923 35.5 14.656 30.225 14.656C25.031 14.656 22.297 17.118 22.297 20.737C22.297 24.821 25.165 26.893 30.225 26.893ZM10.856 14.926V26.713H22.1V23.574H14.924V14.926H10.856ZM50.722 26.713L50.617 25.571C49.2561 26.5422 47.5997 27.0096 45.932 26.893C43.425 26.893 41.337 26.142 40.166 24.626C39.3936 23.5192 39.0036 22.1906 39.055 20.842C39.0111 19.5217 39.4146 18.2253 40.2 17.163C41.385 15.692 43.533 14.716 46.731 14.716C50.41 14.716 52.572 15.842 53.502 17.734C53.7016 18.1796 53.8189 18.6576 53.848 19.145H49.956C49.8579 18.8488 49.6754 18.5878 49.431 18.394C48.6557 17.88 47.7299 17.6423 46.803 17.719C46.2593 17.6531 45.7077 17.7033 45.1849 17.8664C44.6621 18.0295 44.1798 18.3017 43.77 18.665C43.3046 19.302 43.0861 20.0862 43.155 20.872C43.101 21.6217 43.3019 22.3677 43.725 22.989C44.1385 23.3743 44.6301 23.6661 45.1663 23.8449C45.7026 24.0236 46.2709 24.0851 46.833 24.025C47.9493 24.1158 49.0576 23.7715 49.926 23.064C50.1125 22.8308 50.2411 22.5566 50.301 22.264H46.113V19.731H53.95V26.713H50.722ZM63.019 26.893C68.589 26.893 70.932 24.49 70.932 20.737C70.932 16.923 68.2899 14.656 63.019 14.656C57.825 14.656 55.091 17.118 55.091 20.737C55.091 24.821 57.959 26.893 63.019 26.893Z" class="ccustom" fill="#394149"></path>
      <path d="M84.857 26.668V14.881H87.757V26.668H84.857Z" class="ccustom" fill="#394149"></path>
      <path d="M102.649 21.743C101.914 22.704 100.649 23.143 98.866 23.154C98.49 23.154 93.505 23.139 93.505 23.139V26.668H90.667V14.881H98.867C99.5242 14.8115 100.189 14.8812 100.817 15.0855C101.446 15.2899 102.024 15.6243 102.515 16.067C103.163 16.9112 103.478 17.9638 103.401 19.025C103.467 19.9902 103.202 20.9491 102.649 21.743ZM100.322 17.9C100.022 17.45 99.375 17.2 98.28 17.2H93.49V20.788H98.249C99.42 20.788 100.037 20.548 100.322 20.082C100.491 19.7537 100.564 19.384 100.532 19.016C100.557 18.6322 100.485 18.2483 100.322 17.9Z" class="ccustom" fill="#394149"></path>
      <path d="M111.764 26.848C106.418 26.848 104.782 24.848 104.782 22.869H107.815C107.815 23.845 109.151 24.581 111.899 24.581C114.631 24.581 115.352 24.1 115.352 23.319C115.352 22.448 114.812 22.178 112.274 21.893C111.774 21.848 110.413 21.683 109.902 21.608C106.302 21.202 104.916 20.136 104.916 18.229C104.916 16.217 106.944 14.701 111.343 14.701C116.118 14.701 117.95 16.578 117.95 18.53H114.95C114.95 17.539 113.824 16.968 111.166 16.968C108.433 16.968 107.848 17.343 107.848 18.079C107.848 18.845 108.448 19.085 111.348 19.43C112.009 19.521 113.48 19.686 113.885 19.73C116.949 20.045 118.33 21.156 118.33 23.123C118.325 25.466 116.223 26.848 111.764 26.848Z" class="ccustom" fill="#394149"></path>
      <path d="M126.87 26.833C122.952 26.833 120.399 25.286 120.399 22.033V14.881H123.266V22.073C123.266 23.56 124.483 24.55 126.99 24.55C129.257 24.55 130.609 23.62 130.609 22.073V14.881H133.447V22.3C133.447 25.257 131.074 26.833 126.87 26.833Z" class="ccustom" fill="#394149"></path>
      <path d="M148.987 26.668V18.8L145.308 26.668H142.516L138.942 18.8V26.668H136.242V14.881H139.9L143.954 23.86L148.098 14.881H151.698V26.668H148.987Z" class="ccustom" fill="#394149"></path>
    </svg>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

<main class="flow content-grid">

  <h1 class='site-title'>No more containers!</h1>
  <p>It can be useful to have a system in place that's easy to go full-width, or have a "breakout" section for calls
    to
    action or blockquotes, or other things you want to call attention to.</p>
  <p class="breakout">Traditionally, we use a container or wrapper, which we need to close, and then open again, but thanks to grid,
    and
    with the recent additions of subgrid to all the evergreen browsers, maybe there's a better way to do things?</p>
  <p>It has it's downsides, as the code is more complex, and it's not as obvious how it works when we're so used to
    the
    old pattern.</p>
  <p>That said, we shouldn't limit ourselves just because we are used to working in a specific way.</p>

  <section class="full-width bg-primary section-padding flow">
    <h2>This section has a different background-color</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptates vitae reiciendis corporis
      molestias aspernatur vero eaque obcaecati neque dolores veritatis repudiandae voluptas consectetur voluptatum
      nobis maiores doloremque, nostrum deleniti!</p>
    <p>Aspernatur, dignissimos. Quaerat corporis, itaque porro dolore ea a placeat molestiae nihil voluptatem veniam
      facere, corrupti in vel, voluptates enim soluta sint dolores? Quaerat laboriosam iusto voluptatem accusantium
      ex
      alias?</p>
  </section>

  <h2>Back to normal</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto nam at praesentium cumque rem molestias
    earum
    officia neque nemo sunt laboriosam vero eum optio, saepe dolorem exercitationem quod asperiores iste?</p>
  <p class='breakout call-to-action'>Not sure why, but we could set things up if ever you wanted random text to be full-bleed
    without
    bothering with a div or anything on the outside of it as well</p>
  <p>Error nulla doloribus ex, eius voluptates saepe, in quae ea nesciunt rem possimus obcaecati consequuntur
    deleniti.
    Tempore deleniti deserunt harum, distinctio, culpa atque numquam ducimus repellat fugit iusto eveniet velit.</p>
  <h3>Images as full-bleed works too</h3>
  <img class='full-width' src="https://unsplash.it/1600/400" alt="">
  <p>Exercitationem dolorum animi at autem tempore omnis, dolorem saepe sint totam architecto, vitae cum doloribus
    illo?
    Laudantium laboriosam saepe eligendi ipsam corrupti molestias expedita tempora eos minima, facere, eius dicta.
  </p>
  <p>Magnam eius beatae similique officiis quaerat. Natus est dicta temporibus a. Aut mollitia magnam quo. Sequi
    repellendus voluptas quia suscipit autem iste! Accusamus, delectus beatae inventore obcaecati ut totam ab.</p>

  <p>Eligendi ea maiores asperiores sed nobis qui, animi sint? Ratione laboriosam cum quasi repudiandae in,
    necessitatibus veritatis nihil perferendis maiores consequuntur magnam perspiciatis minus est quibusdam,
    voluptate
    voluptas natus corporis.</p>
  <p>Vero, facilis! Animi quam dolor a sunt, quae placeat perspiciatis quia odio quisquam at tempore dolorem eum
    ratione
    vel minima eaque repellendus dolores architecto necessitatibus velit reprehenderit amet et rem.</p>
  <p>Quos, animi expedita facere iste soluta accusamus et facilis, temporibus nemo praesentium iusto aliquam
    voluptas
    magnam pariatur blanditiis optio, corporis laborum quas? Quis libero aperiam est fuga veniam eos tenetur?</p>

  <section class="bg-primary full-width">
    <h3>content</h3>
  </section>

</main>