Текст отображается за пределами предназначенного ⇐ CSS

[Anonymous]

Я пытаюсь отобразить сообщения пользователей из базы данных на своей странице, однако изображения профиля пользователя не отображаются внутри элемента div, где они должны быть. Даже при изменении изображения на текст проблема сохраняется.


Насколько я могу судить, фотография профиля должна отображаться внутри контейнера post-profile-photo, который я покрасил в зеленый цвет на изображении выше.

Код: Выделить всё

echo "" . $post["post_title"] . "" . $post["username"] . "" . $profilePhoto . "";

Код: Выделить всё

//result of postGetProfilePhoto(); right now
echo "[url=/user.php?u=]UserPage[/url]";

Вот мой CSS

Код: Выделить всё

.post-profile-photo {
position: relative;
width: 34px;
height: 34px;
object-fit: cover;
border-radius: 50%;
}

.post-username {
position: relative;
font-weight: bold;
}

.post-title {
position: relative;
top: 5px;
}

.post-title-container {
background-color: red;
}

.post-username-container {
background-color: aqua;
width: 300px;
}

.post-profile-photo-container {
background-color: rgb(0, 255, 42);
width: 20px;
height: 20px;
}

Я пробовал возиться с флексбоксами и значениями позиций, но мне не удалось получить текст/фото внутри зеленого div. Любая помощь приветствуется!

Подробнее здесь: https://stackoverflow.com/questions/791 ... tended-div