Почему мой figcaption появляется в правом верхнем углу изображения?

Question

Когда я вставляю этот код, все изображения имеют свои подписи под ними, но у СПИЦЕПТИЧЕСКОГО рома есть его figcaption в правом верхнем углу. Как это исправить? это HTML-код:

<div class="tea-image">
                <figure>
                    <img src="./ressources/images/img-berryblitz.jpg" alt="Fall Berry Blitz Tea">
                    <figcaption>Fall Berry Blitz Tea</figcaption>
                </figure>
                    <img src="./ressources/images/img-spiced-rum.jpg" alt="Spiced Rum Tea">
                    <figcaption>Spiced Rum Tea</figcaption>
                <figure>
                    <img src="./ressources/images/img-donut.jpg" alt="Seasonal Donuts">
                    <figcaption>Donuts</figcaption>
                </figure>
                <figure>
                    <img src="./ressources/images/img-myrtle-ave.jpg" alt="Myrtle Ave Tea">
                    <figcaption>Myrtle Ave Tea</figcaption>
                </figure>
                <figure>
                    <img src="./ressources/images/img-bedford-bizarre.jpg" alt="bedford Bizarre Tea">
                    <figcaption>bedford Bizarre Tea</figcaption>
                </figure>
        </div>

и это код CSS:

.tea-image{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    justify-content: center;
}
.tea-image img{
    height: 15rem;
    width: 15rem;
    padding-right: 2em;
}
figcaption{
    font-weight: bold;
    text-align: center;
}

Answer 1

Вам не хватало <figure> а также </figure> теги контейнера вокруг этой фигуры.

.tea-image{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    justify-content: center;
}
.tea-image img{
    height: 15rem;
    width: 15rem;
    padding-right: 2em;
}
figcaption{
    font-weight: bold;
    text-align: center;
}

<div class="tea-image">
                <figure>
                    <img src="http://placekitten.com/250/250" alt="Fall Berry Blitz Tea">
                    <figcaption>Fall Berry Blitz Tea</figcaption>
                </figure>
                <figure> <!--     <======= HERE        -->
                    <img src="http://placekitten.com/250/250" alt="Spiced Rum Tea">
                    <figcaption>Spiced Rum Tea</figcaption>
                </figure> <!--     <======= HERE        -->
                <figure>
                    <img src="http://placekitten.com/250/250" alt="Seasonal Donuts">
                    <figcaption>Donuts</figcaption>
                </figure>
                <figure>
                    <img src="http://placekitten.com/250/250" alt="Myrtle Ave Tea">
                    <figcaption>Myrtle Ave Tea</figcaption>
                </figure>
                <figure>
                    <img src="http://placekitten.com/250/250" alt="bedford Bizarre Tea">
                    <figcaption>bedford Bizarre Tea</figcaption>
                </figure>
        </div>

Answer 2

У вас недействительный HTML, у вас отсутствует figure тег на втором элементе.

Вы можете проверить свой HTML на https://validator.w3.org/.

<div class="tea-image">
                <figure>
                    <img src="./ressources/images/img-berryblitz.jpg" alt="Fall Berry Blitz Tea">
                    <figcaption>Fall Berry Blitz Tea</figcaption>
                </figure>
                <figure>
                    <img src="./ressources/images/img-spiced-rum.jpg" alt="Spiced Rum Tea">
                    <figcaption>Spiced Rum Tea</figcaption>
                </figure>
                <figure>
                    <img src="./ressources/images/img-donut.jpg" alt="Seasonal Donuts">
                    <figcaption>Donuts</figcaption>
                </figure>
                <figure>
                    <img src="./ressources/images/img-myrtle-ave.jpg" alt="Myrtle Ave Tea">
                    <figcaption>Myrtle Ave Tea</figcaption>
                </figure>
                <figure>
                    <img src="./ressources/images/img-bedford-bizarre.jpg" alt="bedford Bizarre Tea">
                    <figcaption>bedford Bizarre Tea</figcaption>
                </figure>
        </div>