Расстановка блоков

введите сюда описание изображения

Изображение вываливается из блока, как мне кажется. Там полоска под заголовками, а должна быть под блоком где изображение и заголовок вместе. Не силен в программировании, будет время гляньте пожалуйста. Спасибо

div {
display: block;
}
.post-outer {
  padding: 0;
  position: relative;
}
.post-header {
    clear: left;
    color: #9E9E9E;
    margin: 0;
    width: inherit;
}
.post-body {
    color: #969ba1;
    font: normal normal 16px Roboto, sans-serif;
    line-height: 1.6em;
    margin: 0.2em 0;
}
.post-body .snippet-thumbnail {
float: left;
    height: 60px;
    width: 80px;
    margin: 0 2vw 0 0;
}
.post-title {
    font: normal bold 20px Roboto, sans-serif;
    margin: 0;
    max-width: 100%;
    line-height: 1.6em;
}

    <div class="post-outer">
  <div class="post">
    <div class="post-header">
      <div class="post-header-line-1">
        <span class="byline post-timestamp">
<time class="published" datetime="2022-04-30T15:54:00+03:00">
апреля 30, 2022
</time>
</span>
      </div>
    </div>
    <div class="container post-body entry-content" id="post-snippet-8205459958563202881">
      <div class="snippet-thumbnail">
        <img alt="Изображение" src=".jpg">
      </div>
      <h2 class="post-title entry-title">
        <a href="https://roman.khakimov.me/2022/04/PayPal-in-Ukraine.html?m=1">Перевод денег в Украину с помощью PayPal</a>
      </h2>
    </div>
  </div>
</div>

Ответы (1 шт):

Автор решения: Pavel Nazarian

Удалите float: left; отсюда:

.post-body .snippet-thumbnail{
  float: left;
}

И добавьте:

.post-body {
  display: flex;
  align-items: center;
}
→ Ссылка