2 column layout, split 1 third / 2 thirds with contain contained but background extending to edge of the browser

Question

I have created a codepen here to show my issue: https://codepen.io/nitrokev/pen/abqOoEr

I have a 50 / 50 split layout which works how I want it to with the text content for each column contained to an overall 1260px container but the background expanding beyond this container.

I have tried to create a ⅓ ⅔ split layout to do the same, and it works up to a certain screen size, but as you expand the screen the text content stops aligning with the 50 / 50 content.

I could add media queries to larger size screen to help, but I'm looking for a more elegant solution that works at all sizes

see codepen, as you make the window size larger the text alignment starts to break from the 50 / 50 block above

<h2>Two column contained with full width background and contained content</h2>
    <section>
     <div class="article-grid">
    <article>
      <div class="article-inner-grid">
        <div class="article-padding">
      <header>
        <h2>Heading 1</h2>  
      </header>
      <div class="entry-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In enim lorem, sollicitudin ut accumsan in, porta sed dui. Sed sagittis est risus, ac luctus odio porta at. </p>

      </div>
      </div>
      </div>
    </article>
    <article>
      <div class="article-inner-grid">
        <div class="article-padding">
      <header>
        <h2>Heading 2</h2>  
      </header>
      <div class="entry-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In enim lorem, sollicitudin ut accumsan in, porta sed dui. Sed sagittis est risus, ac luctus odio porta at. </p>
          </div>
      </div>
      </div>
    </article>
   </div>
</section>
  <h2>Two column 1/3 2/3 with full width background and contained content</h2>
  <section>
  <div class="article-grid">
    <article class="one-third">
      <div class="article-inner-grid">
        <div class="article-padding">
      <header>
        <h2>Heading 1</h2>  
      </header>
      <div class="entry-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In enim lorem, sollicitudin ut accumsan in, porta sed dui. Sed sagittis est risus, ac luctus odio porta at.</p>



      </div>
      </div>
      </div>
    </article>
    <article class="two-thirds">
      <div class="article-inner-grid">
        <div class="article-padding">
      <header>
        <h2>Heading 2</h2>  
      </header>
      <div class="entry-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In enim lorem, sollicitudin ut accumsan in, porta sed dui. Sed sagittis est risus, ac luctus odio porta at.</p>
          </div>
      </div>
      </div>
    </article>
   </div>
</section>

.article-container{
max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}
section{
margin-bottom:2rem;}

.article-grid{
  display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
}
article{
  flex:1;
  display: flex;
  font-family: arial;
}
article:nth-of-type(1){
  background-color:blue;
  color:white;
  justify-content: flex-end;
}
article:nth-of-type(2){
  background-color:red;
  color:white;
  justify-content: flex-start;
}

.article-inner-grid{
width:calc(#{$container} /2);
  max-width: calc(#{$container} /2);
}
.article-padding{
  padding:2rem;

}
h2{font-family: arial;}


article.one-third{
  flex:1  33%;
}
article.two-thirds{
    flex: 2  auto ;
}

article.one-third .article-inner-grid{
width:calc(#{$container} /3);
  max-width: calc(#{$container} /3);

}

article.two-thirds .article-inner-grid{
width:calc((#{$container} / 3) * 2);
  max-width: calc((#{$container} / 3) * 2);

}

Answer 1

calc() is a way.

exemple with setting a container leaving a max-width of 560px(to adapt to snippet's size) for the direct child. this will be useful later to lay a full background and your content in this max-width area.

div {
  padding: 0 calc(50vw - 280px); 
}

<div>
<hr>
<h1 style="font-size:1.1rem;text-align:center">how do i get the width to keep empty both sides once the view exceeds 560px of width ?</h1>
<p>If no elements are standing there to be resized, then use padding</p>
<p>take half of the screen's width and remove half of the max-width expected for the content.</p>
<p style="text-align:center"> 50vw - 280px </p>
<p> Use that result to set the padding for both left and right</p>
<h2 style="text-align:center">Check it out</h2>
<p>Run the snippet in FullPage and resize your browser's window</p>
<p>Note: negative value are invalid, so no padding will be applied below a 1200px screen's width</p>
<hr>
</div>

To lay the backgrounds is about the same idea, you need calc() to do the math for you : examples within your 1200px and background-image (gradient or image) where you calculate offset position from the center minus the half of the first max-size .

Below you 1200px , a reset or setting background's value elsewhere will be needed (negative value won't be ignored or will disable the rule). If there is simple math to achieve this, i did not think of it .someone else might come with an idea edit added vertical line to simulate borders around content within the 1200px of max-space to use.

* {
  padding: 0;
  margin: 0;
}

.child-1200 {
  padding: 0 calc(50vw - 600px);
  /* negative values are invalid = no padding */
  background: 
    linear-gradient( to left,
      transparent 0, 
      transparent calc( 50vw - 602px) , 
      white calc(50vw - 602px),
      white calc(50vw - 600px), 
      transparent  calc(50vw - 600px) ,  
      transparent calc(50vw + 600px) , 
      white calc(50vw + 600px), 
      white calc(50vw + 602px), 
      transparent calc(50vw + 602px)
    ),
      linear-gradient(to right, blue calc(50% - (200px - 1em)), red calc(50% - (200px - 1em))) 33.83% 0 / 100.1% 100%;
  color: white;
}

article {
  padding: 1em;
}

.one-two {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1em
}

.child-1200.bgimg {
  display: block;
  background:
    linear-gradient( to left,
      transparent 0, 
      transparent calc( 50vw - 602px) , 
      white calc(50vw - 602px),
      white calc(50vw - 600px), 
      transparent  calc(50vw - 600px) ,  
      transparent calc(50vw + 600px) , 
      white calc(50vw + 600px), 
      white calc(50vw + 602px), 
      transparent calc(50vw + 602px)
    ), url(https://picsum.photos/id/56/2880/1920) 0 0/ calc(50% - (200px - 1em)) auto no-repeat, url(https://picsum.photos/id/55/4608/3072) 100% 0 / 66.66% auto;
}

@media screen and (max-width:1200px) {
  .one-small {
    display: block;
  }
  .one-small article {
    background: blue
  }
  .one-small article:nth-child(odd) {
    background: red;
  }
  .bgimg .one-small article {
    background: url(https://picsum.photos/id/56/2880/1920) 0 0/ 100% auto;
  }
  .bgimg .one-small article:nth-child(odd) {
    background: url(https://picsum.photos/id/55/4608/3072)0 0/ 100% auto;
  }
}

<section class="child-1200">
  <div class="one-two one-small">
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
  </div>
  <div class="one-two one-small">
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
  </div>
  <div class="one-two one-small">
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
  </div>
</section>
<section class="child-1200 bgimg">
  <div class="one-two one-small">
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
  </div>
  <div class="one-two one-small">
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
  </div>
  <div class="one-two one-small">
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
    <article>
      <h1>title</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
        Mauris placerat eleifend leo.</p>
    </article>
  </div>
</section>

I hope that is useful to you and that i understood your question :) Here is the snippet within a codepen you can play with : https://codepen.io/gc-nomade/pen/NWeRNYV