переполнение: скрытое и абсолютное положение

Question

Как скрыть переполнение страницы абсолютно позиционированного элемента?

У меня установлено значение accent svg position: absolute относительно родительского div с серой рамкой (position: relative). Это выдвигает ширину страницы за пределы контейнера страницы и создает пробел x-scroll [см. Рис. A].

Я попытался добавить overflow-x: hidden к контейнеру страницы, что решает проблему переполнения x, но затем заголовок (position: sticky; top: 0) неожиданно толкает баннер черного героя вниз (он должен лежать сверху).
[См. Рис. B].

[Рис. A]

[Рис. B] [] 2

jsx div с акцентом:

<div className="content-section" id="section-science-de-performance">
        <div className="d-flex jc-center">
          <div className="ta-center custom-width">
            <h3><strong>La science de la performance</strong></h3>
            <p> ... </p>
          </div>
        </div>

        <div className="grey-border" id="science-graphic-card">
          <div className="left-pane">
            <div className="small-text-section">
              <h5>Des informations objectives </h5>
              <p>...</p>
            </div>
            <div className="small-text-section">
              <h5>Un modèle prédictif</h5>
              <p>...</p>
            </div>
            <div className="small-text-section">
              <h5>Une méthode scientifique</h5>
              <p>  ... </p>
            </div>
          </div>
          <div className="right-pane">
            <SVG src={svgYoga} id="svgYoga" />
            <div className="data-icon-group">
              <div className="data-icon" id="data-icon-1">
              </div>
              <div className="data-icon" id="data-icon-2">
              </div>
              <div className="data-icon" id="data-icon-3">
              </div>
            </div>
          </div>
          <SVG src={accentBlast} className="accent-blast"/>
        </div>
</div>

относительно css: DIV с акцентом

#science-graphic-card {
    background-color: #FFFFFF;
    width: 100%;
    display: flex;
    position: relative;

    ...

    .accent-blast {
      position: absolute;
      right: -76px;
      top: -76px;
      z-index: -1;
    }

HEADER

.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  height: 80px;
  width: 100%;
  padding: 0 10vw;
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0));
  display: flex;
  justify-content: space-between;
  align-items: center;
...