CSS: не удается заставить текст всплывать справа от моего изображения

Question

Должно быть так просто, и я прочитал достаточно постов здесь, чтобы это было совсем несложно. Так что, конечно, это не ....

Я просто пытаюсь разместить текст справа от моего изображения. Пробовал разные тактики с моей позицией, дисплеем и поплавками. Все безрезультатно.

Если вы посмотрите на https://staging.hellodadventures.com и прокрутите вниз до места, где появляется «Сделка с DadVentures», примерно в середине страницы, вы увидите его.

Вот мой код сначала HTML:

.dadventures-deal img {
  position: relative;
  float: left;
  z-index: 251;
}

.dadventures-deal h3 {
  position: relative;
  float: left;
  background: #FFF;
  color: #F00;
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 16px;
  top: 12px;
  padding: 8px 14px;
  z-index: 250;
}

<div class="row-deals">
  <a href="https://staging.hellodadventures.com/event/santa-monica-pier-aquarium/" title="Santa Monica Pier Aquarium">
    <div class="feature">
      <figure class="fixedratio" style="background: url('https://staging.hellodadventures.com/wp-content/uploads/2019/03/healthebay-aquarium-e1551648109222.jpg');"></figure>
      <div class="feature-bottom">
        <h2>Santa Monica Pier Aquarium </h2>
        <div class="dadventures-deal"><img src="https://staging.hellodadventures.com/wp-content/themes/dadvation/img/symbol-dadventures.png" alt="DadVentures Deals">
          <h3>DadVentures Deal</h3>
        </div>
      </div>
    </div>
  </a>
</div>

Опять же, должно быть просто, но этот противный CSS .....

Answer 1

Добавить отображение: inline-block и clear: нет или clear: вправо до h3 добавить отображение: блок для img

Answer 2

добавьте clear: none; к вашему тегу h3