embed.html

<div class="full-width" style="display: flex;">
  <div class="left-chart-container" style="height: 100px; background-color: steelblue; width: 50%;"></div>
    <div class="right-chart-container" style="height: 100px; background-color: steelblue; width: 50%;"></div>
</div>
<script>
function negMargin(idname) {
  const de = document.getElementById(idname)
  const deb = de.getBoundingClientRect()
  const debw = deb.width
  console.log({ debw })
  const ww = window.innerWidth
  if (de.style.marginLeft) {
    const ml = parseFloat(de.style.marginLeft.replace('px', ''))
    const unmwidth = debw + 2 * ml
    const nm = `-${(ww - unmwidth - 30) / 2}px`
    de.style.marginLeft = nm
    de.style.marginRight = nm
  } else {
    const nm = `-${(ww - debw - 30) / 2}px`
    de.style.marginLeft = nm
    de.style.marginRight = nm
  }
}

// Change this to choose a different element to make it full-width
const idOfFullWidthElement = 'full-width'

window.addEventListener('resize', function () {
  negMargin(idOfFullWidthElement)
})

negMargin(idOfFullWidthElement)
</script>

negative_margin.js

function negMargin(idname) {
  const de = document.getElementById(idname)
  const deb = de.getBoundingClientRect()
  const debw = deb.width
  console.log({ debw })
  const ww = window.innerWidth
  if (de.style.marginLeft) {
    const ml = parseFloat(de.style.marginLeft.replace('px', ''))
    const unmwidth = debw + 2 * ml
    const nm = `-${(ww - unmwidth - 30) / 2}px`
    de.style.marginLeft = nm
    de.style.marginRight = nm
  } else {
    const nm = `-${(ww - debw - 30) / 2}px`
    de.style.marginLeft = nm
    de.style.marginRight = nm
  }
}
window.addEventListener('resize', function () {
  negMargin('full-width')
})

negMargin('full-width')

This small script lets a div take up (almost) the full width even when its parent isn't full width. Currently support div with a specific id (can add support for classes too)