Wordpress (divi) проблема выравнивания Flexbox

Question

Я использую Wordpress (конструктор страниц темы Divi), и я пытаюсь использовать flexbox css для горизонтального выравнивания двух модулей изображений, каждый в отдельном столбце в строке, так что один появляется слева, а другой справа.

Я добавил собственный CSS в строку: 'display: flex; justify-content: space-between', который работает для модуля левого изображения, но правое изображение не сдвигается полностью вправо.

См. Пример на изображении ниже. Я пробовал возиться со многими настройками, но ничего не помогает. Пример проблемы

В настоящее время страница на моем веб-сайте ( http://www.mistyricardo.com) является частной, но при необходимости я могу сделать ее общедоступной для проверки.

Заранее спасибо.

следующий...

Answer 1

Проверить и применить в соответствии с вашей разметкой

Если книги "Карри дома - Том 1" и "Карри дома - Том 2" находятся в одном контейнере:

         .book-wrapper {
     display: flex;
     justify-content: space-between;
}

/* this is for demo only - ignore the below */
img {
    height: 150px;
}

         <div class="banner-header">
   <div class="book-wrapper">
      <img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1548876269l/43791788._SY475_.jpg" />
      <img  src="https://upload.wikimedia.org/wikipedia/en/f/f4/Gangsta_Granny_Cover.png" />
   </div>
</div>

Если книги "Карри дома - Том 1" и "Керри дома - Том 2" находятся в разных контейнерах:

         .banner-header {
    display: flex;
}

.book-img {
    margin-left: auto;
}

/* this is for demo only - ignore the below */
img {
    height: 150px;
}

         <div class="banner-header">
   <div class="book-wrapper">
       <img class="book-img" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1548876269l/43791788._SY475_.jpg" />
   </div>
   
   <img class="book-img"   src="https://upload.wikimedia.org/wikipedia/en/f/f4/Gangsta_Granny_Cover.png" />
</div>