Некоторые части моего стиля CSS не применяются. Как я могу решить проблему?

Остальная часть стиля CSS работает, но некоторые части не применяются. Как я могу это решить?

Вот мой HTML-код и покажите три изображения, которые отображаются рядом. У каждого изображения есть заголовок, который я хочу написать под каждым изображением, но стиль CSS для этих частей не применяется.

<div class = "row">
    <div class = "col-sm-4">
        <div class = "placeBox">
            <div class = "imgBx">
                <img src = "images/paris.jpg" class = "img-fluid">
            </div>
        </div>
        <div class = "content">
            <h3>Turnul Eiffel<br>
                <span>Paris</span></h3>
        </div>
    </div>

    <div class = "col-sm-4">
        <div class = "placeBox">
            <div class = "imgBx">
                <img src = "images/japan.jpg" class = "img-fluid">
            </div>
        </div>
        <div class = "content">
            <h3>Castelul Himeji<br>
                <span>Japonia</span></h3>
        </div>
    </div>

    <div class = "col-sm-4">
        <div class = "placeBox">
            <div class = "imgBx">
                <img src = "images/grecia.jpg" class = "img-fluid">
            </div>
        </div>
        <div class = "content">
            <h3>Santorini<br>
                <span>Grecia</span></h3>
        </div>
    </div>
</div>

И это части стиля CSS, которые не применяются:

.placeBox .content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: baseline;
    align-items: flex-end;
}

.placeBox .content h3{
    position: relative;
    margin: 0;
    padding: 10px;
    background: rgba(0,0,0,.95);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    width: 100%;
    text-align: center;  
}

Спасибо!