Есть ли способ правильно масштабировать <div>в теме Wordpress, такой как Semplice?

Question

От

новичка до HTML и CSS здесь. Я пытаюсь настроить свой веб-сайт, работающий на теме Wordpress Semplice. Я увидел классный эффект на Codepen, который позволил вам навести 2 изображения друг на друга в CSS. Я смог создать свою собственную форму и заставить код работать с моей темой. Я делаю это, добавляя «модуль кода», который, насколько я понимаю, просто создает / для запуска кода.

Код работает нормально, и я также смог добавить пользовательский CSS через тему. Проблема заключается в масштабировании: как только я уменьшаю ширину браузера, появляется огромный разрыв между div (я повторяю этот код три-четыре раза, я хочу использовать их в качестве обложек проекта), тогда как другие объекты отлично масштабируются с темой . Я чувствую, что мне здесь не хватает простого отступа или поля, но все, что я пробовал, от полей до отступов, ломается с масштабированием. Тема также имеет свои собственные внутренние параметры заполнения, но, похоже, они ломаются. Я пробовал добавить margin-bottom и -top к CSS с% и пикселями, но безрезультатно.

Я понимаю, что здесь, вероятно, есть что-то в теме, что нарушает этот код или мешает его правильному использованию, но я надеялся, что можно добавить что-то вроде! Important, чтобы предотвратить нарушение кода и / или поиграйте с темой.

HTML, использованный в DIV:

<div class="main" style="height: 100%">
        <img src="https://i.imgur.com/hMJn55T.jpg" alt="" id="img-1">
        <img src="https://i.imgur.com/gyjAnHr.jpg" alt="">

</div>

CSS, введенный через тему:

}
.main{
    display:inline-block !important;
    margin-bottom:10px !important;
    margin-top:10px !important;
    padding: 20px;
    position: absolute !important;
}
.main img{
    position: absolute;
    width: 100%;
}
.main h6{
    position:absolute;
    display:inline;
    margin-top: -5%;
    margin-bottom: 10%;
}
.main #img-1:hover{
    z-index: 99;

  -webkit-clip-path: polygon(0% 0%, 95% 0%, 75% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 95% 0%, 75% 100%, 0% 100%);
    transition-duration: 800ms;
    transition-timing-function: ease;
}
.main #img-1{
    z-index:10;
  -webkit-clip-path: polygon(0% 0%, 35% 0%, 15% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 35% 0%, 15% 100%, 0% 100%);
    transition-duration: 450ms;
    transition-timing-function: ease;

}

Это мой первый пост, я пытался быть кратким, но если что-то отсутствует или непонятно, дайте мне знать, и я добавлю дополнительную информацию! :)

Масштабирование между пробелами можно увидеть на этих изображениях: Изображение: Как и должно быть, до изменения размера браузера. Изображение: Слишком далеко друг от друга

Обновление: это раздел в том виде, в котором он есть в теме, в комплекте с сгенерированными в теме div -ами.

<section id="section_bbyngcjvd" class="content-block" data-column-mode-sm="single" data-column-mode-xs="single">

                    <div class="container">
                    <div id="row_yobohwqkk" class="row"><div id="column_iht59fpyu" class="column" data-xl-width="12">
                <div class="content-wrapper">

            <div id="content_pozj163h8" class="column-content" data-module="code">

            <div class="is-content ce-code">
                    <div class="main" style="height: 100%">
        <img src="https://i.imgur.com/hMJn55T.jpg" alt="" id="img-1">
        <img src="https://i.imgur.com/gyjAnHr.jpg" alt="">

</div>
            </div>

            </div>

                </div>
            </div></div>
                    </div>
                </section>