<section id="banner">
  
  <div class="textbox animated">
    <h1>Absolutely Positioned Element
      <small style="display:block; font-size:65%;">That Lines up with left margin of a max-width element.</small>
    </h1>
  </div>
  
</section>

<div class="maxwidth">
  <p style="background:#fea; padding:8px; border:solid 2px #ea2;"><strong>Updated: Nov. 11, 2021</strong> <a href="#improved">Skip to Best Solution &raquo;</a></p>
  <p>Adjust the width of this window.</p>
  <p>This box has a max-width of <b>500px</b>, while the title above is absolutely positioned.</p>
  <p>But they always line up.</p>
  <p>This is accomplished by usign <b>CSS Calc</b> to calculate the <b>padding-left</b> of the text box above.</p>
  <p>The math is actually pretty simple.  We take the full width of the viewport minus the max width, and divide that by two.</p>
  <p>Here's what the code looks like...</p>
  
  <code>
    padding-left:calc( (100vw - 500px) / 2);
  </code>
  
  <p>There's only one tiny problem.</p>
  <p>Scroll bars.</p>
  <p>They mess up this lovely formula. So you have to remove 8 extra pixels to make it perfect, like this...</p>
  
  <code>
    padding-left:calc( (100vw - 500px) / 2 - 8px);
  </code>
  
 
  
  <hr/>
  
  <h2 id="improved">Improved Solution!!! (Nov. 11, 2021)</h2>
  
  <p>Until now, scroll bars were the Achilles' heel of this code.</p>
  
  <p>Previously you were forced manually remove 8px to account for the standard 17px scrollbar.  But adjusting 8px for the scrollbar isn't ideal because you're <b>assuming there <em>will be</em> a 17px wide scrollbar.</b></p>
  
  <p>That assumption is far from certain. Some browsers have floating scroll bars (like smartphones or Safari on MacOS) and short pages (or tall screens) might not have scroll bars at all.</p>
  <p> So, here's a better solution!</p>
  
  <p>You can actually get the <b>viewport width minus the scrollbars</b> with the following equation that I found on <a href="https://stackoverflow.com/questions/33606565/is-it-possible-to-calculate-the-viewport-width-vw-without-scrollbar">  Stack Overflow</a>.</p>
  
  <code>width: calc(100vw - (100vw - 100%));</code>
  
  <p>However, this <b>only works if the element you are sizing is a direct child of body, or an element that has the same width as body.</b></p>
  
  <p>That is, unless you use a CSS Variable.</p>
  
  <p>Create a CSS variable on the body, as shown below...</p>
<code>
body { 
  --screen-width:calc(100vw - (100vw - 100%)); 
 }
  </code>
  <p>Then use it anywhere it is needed.  Here's an example...</p>
  <code>
.textbox { 
  padding-left: calc( ( var(--screen-width) - 500px) / 2);
 }
</code>
  <p>The code works on pages with scroll bars or without scroll bars, with <em>zero</em> need for javascript.</p>
  
  <p>What do you think?  Did I miss anything?</p>
  
  <p>Feel free to comment on this pen with your thoughts.</p>
</div>
  

<div class="ruler"></div>

html, body {display:block; height:100%; }
body {
  margin:0; 
  font-family:sans-serif; 
  position:relative;
  --screen-width:calc(100vw - (100vw - 100%));
}
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
#banner {
  height:36vw;
  background:url(https://www.launch2success.com/wp-content/uploads/2019/07/measuring-grass.jpg) center #489;
  background-size:cover;
  color:white;
  position:relative;
}
.maxwidth {
  max-width:500px;
  margin:0 auto; 
  padding-bottom:16px;
}
.textbox {
  position:absolute;
  bottom:16px;
  padding:8px;
  padding-left:calc( (100vw - 500px) / 2 - 8px);
  padding-left: calc( ( var(--screen-width) - 500px) / 2);
}
.textbox.animated {
  animation:0.75s slideIn ease-out;
  background:rgba(0,50,60,0.8);
  box-shadow:0 0 1px 1px #fff4;
}
@keyframes slideIn {
  0%{ transform:translateX(-100%);}
  100%{ }
}

.textbox h1 {margin:0; font-size:1.8em;}
p {line-height:1.35;}
code {
  display:block;
  background:#444;
  color:white;
  padding:12px;
  white-space: pre-wrap;
}

.ruler {
  border-left:dashed 1px #ea9;
  position:fixed;
  left:calc( (100vw - 500px) / 2 - 10px );
  left:calc( ( var(--screen-width) - 500px) / 2 - 1px );
  top:0; height:100%;
  animation:1s fadeIn 1s both;
}
@keyframes fadeIn {
  0% { opacity:0;}
  100%{ opacity:1; }
}