Having CSS Issue where putting margin in inner divs moves my whole component

flynt-component[name='BlockWysiwyg'] {
  background-color: var(--background-color);
  position: relative;
}

flynt-component[name='BlockWysiwyg']::before {
    background-image: var(--background-image);
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    inline-size: 100%;
    padding-block: 300px;
    padding-block-end: 200px;
    position: absolute;
    transform: translateY(-50%);
    z-index: -1;
  @media (max-width: 768px) {
      background-position: center;
      background-size: contain;
    }
  }

<flynt-component 
  name="BlockWysiwyg" 
  class="componentSpacing" 
  {{ options.theme ? 'data-theme="' ~ options.theme ~ '"' }} 
  style="
  {% if options.backgroundColor != 'none' %}
    --background-color: var({{ options.backgroundColor }});
  {% endif %} 
    {% if options.marginBlockStart != 'none' %}
      margin-block-start: {{ options.marginBlockStart }};
    {% endif %}
    {% if options.marginBlockEnd != 'none' %}
      margin-block-end: {{ options.marginBlockEnd }};
    {% endif %}
    {% if options.backgroundImage %}
      --background-image: url('{{ options.backgroundImage }}');
    {% endif %}
  ">
  <div class="container">
    <div class="content" 
         data-size="{{ options.size }}" 
         data-align="{{ options.align }}" 
         data-text-align="{{ options.textAlign }}">
      {{ contentHtml|e('wp_kses_post') }}
    </div>
  </div>
</flynt-component>