Новый разработчик и моя ошибка с figcaption, и я не знаю почему

Question

заранее извините за мой английский,

Я должен воспроизвести этот оригинал

Но я делаю это: мое решение

Вот мой код:

Я не знаю, почему мои figcaption так двигаются.

Я благодарю вас заранее.

Answer 1

Это произошло, потому что вы переместили изображение влево.

Вот почему это идет на стороне.

Только не выбирайте тег img, вот так:

      div.psp div.picture-left { /* <---- Just remove the img */
    
    width: 45%;
    margin-right: 1em;
    float:left;

}



div.psp div.picture-left figure figcaption {
    font-size: .7em;
}

Answer 2

измените свой стиль IMG Вот так

      div.psp div.picture-left img {
    
    width: 100%;
    margin-right: 1em;
    float:left;

}

затем добавьте класс css .picture-left как это

      .picture-left {
width:45%;
}

затем добавьте класс CSS .psp как это

      
.psp{
    display: flex;
}

попробуйте это, если у вас есть сомнения, прокомментируйте меня

и не используйте плохие слова в сообщениях на публичной платформе✌