Не могу понять как прижать изображения к правому краю?

Question

[jjsso]

Не могу понять почему изображения не прижимаются к правому краю как на макете?
задаю cпейс битвин, все равно на одном и том же месте стоит

<section class="latest-trends">
    <div class="container">
        <div class="email-form">
         <div class="email-input">
         <input type="text" placeholder="[e-mail]">
         </div>
         <a href="">
            Subscribe
         </a>
       </div>

       <div class="latest__titles">
        <h1>Be aware of the latest trends</h1>
        <p>Stay informed of new trends, but also of our various offers.</p>
        <a href="">Learn more</a>
       </div>
       
    </div>
        <div class="latest-inner">
        <div class="latest__cards container">
        <img src="/images/Picture.png" alt="">
        <img src="/images/Picture (1).png" alt="">
        <img src="/images/Picture (2).png" alt="">
       </div>
       </div>
       <div class="inspirators container">
        <div class="ispirators">
            <h1>Inspirations</h1>
            <p>Our experts are keen to stay on top of trends in order to offer you new inspirations for your interior and exterior every day. Remember that to inspire you we have to inspire ourselves and we want to share that with you.</p>
        </div>
      
          <div class="slides">
          <a href="">
          <img src="/images/Button.png" alt="">
          </a>
          <a href="">
          <img src="/images/Button (1).png" alt="">
          </a>
           <p>01 / 05</p>
          </div>
       </div>

  </section>

.latest__cards {
    margin-left: 190px;
    display: flex;
    justify-content: space-between;
    margin-top: 64px;
    

}

Comments

[Николай]

Здравствуйте, первое, судя по макету у вас там слайдер, смотрите в сторону swiper например.

Второе, пробелы в названиях файла, некорректно так делать.

[Ankhena]

Думаю, что если вы обведете рамочкой того у кого space-between, то выяснится, кто именно не прижимается к правому краю (родитель).

Но тут не нужен space-between, обратите внимание на правую картинку - она обрезана, т.е. выходит за край окна.
Дизайнер показал слайдер и его начальное положение. После прокрутки он станет симметричным.

Сначала нужно вынуть этот блок из общего контейнера (если он там) и растянуть на весь вьюпорт.
Потом приделать слайдер. Swiper подойдёт отлично.

[jjsso]

Ankhena, cпасибо, буду знать

[jjsso]

Николай, учту, спасибо

Answer 1

[Tony]

Если карусель пишете сами, то вот вам .css
Регулируйте свойством flex: 0 0 40%
Где flex: flex-grow flex-shrink flex-basis

body {
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 30px;
}

.latest__cards {
  display: flex;
  gap: 30px;
}

.latest__cards img {
  flex: 0 0 40%;
  max-height: 400px;
  object-fit: cover;
}

А если не сами, то возьмите сразу готовый слайдер т.к. swiper или splide