Wordpress (divi) Flexbox alignment problem

Question

I am using Wordpress (Divi theme page builder) and I'm trying to use flexbox css to horizontally align two image modules each in a separate column within a row, so that one appears on the left and one appears on the right.

I've added custom CSS to the row: 'display: flex; justify-content: space-between' which works for the left image module, but the right image is not being pushed fully to the right.

See the image below for an example. I've tried fiddling about with many settings but nothing is helping. Example of Problem

The page is currently private on my website (www.mistyricardo.com) but if needed I can make it public for inspection.

Thank you in advance.

following...

Answer 1

Check and apply according to your markup

If the 'Currey at home - Volume 1' and 'Currey at home - Volume 2' books are in the same container:

.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>

If the 'Currey at home - Volume 1' and 'Currey at home - Volume 2' books are not in the same container:

.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>