Calculate and set the container margin as a css variable. Helpful when breaking elements out of their container while maintaining alignment.

calculate-container-margin.js

/*-------------------------
Calculate Container Margin
-------------------------*/

document.addEventListener('DOMContentLoaded', event => {
  let root = document.documentElement;

  // Calculate Container Margin
  function calculateContainerMargin() {
    const container = document.querySelector('.container');

    // If a container is on the page then set the margin variable programmatically.
    if (container) {
      // Set the margin property based on the offsetLeft. The offsetLeft will always be the margin for left and right because the container is centered.
      root.style.setProperty('--container-margin', container.offsetLeft + 'px');
    }
  }

  // On init set the margin.
  calculateContainerMargin();

  // On window resize set the margin.
  window.addEventListener('resize', calculateContainerMargin);
});