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

Question

Я следил за этим видео: https://www.youtube.com/watch?v=RwYbpRQHZRk о том, как разместить текст рядом с изображением без использования float. Я сделал все в учебнике, и мой текст по-прежнему не будет идти рядом с изображением. Я пытался изменить ширину, отступы и поля, но я до сих пор не знаю, что не так.

.MainBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  padding: 20px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, .5);
  display: flex;
  transition: .5s;
}

.MainBox:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, .5);
}

.MainBox .imgBox {
  width: 150px;
  flex: 0 0 150px;
}

.MainBox .imgBox img {
  max-width: 70%;
}

.MainBox .Content {
  padding-left: 20px;
}

.MainBox .Content h2 {
  margin: 0;
  padding-left: 0;
  color: #e69411;
  font-size: 22px;
}

.MainBox .Content p {
  margin: 0;
  padding: 10px 0 0;
  text-align: justify;
}

<div class="MainBox">
  <div class="imgBox">
    <img src="planeswalker.jpg">
    <div class="Content">
      <h2>My Article title here</h2>
      <p>adadsasdasalsjdhlasdlaksdlaskdhaloskdlasdhlaksdhl dkjalsdjlaskdjalksdjlaksjdlaksdjlaksdjlasdjlaksdjlad lkasdjlaksdjlaksdjalskdjalskdjalskdjalksdjalksdlskdd jhgaofkiafhjgaudfhgnvuajfnapfjudgnapujnvpudfjnvpafuj nvoafvnaopjfnvapodfjvnapofjnvaponjvfapojnvapofvnapvp
      </p>
    </div>
  </div>
</div>

Answer 1

Итак, мой div-класс = "Content" в div-классе = "imgBox" по ошибке.Так что теперь это выглядит так:

<div class="MainBox">
    <div class="imgBox">
        <img src="planeswalker.jpg">
    </div>
    <div class="Content">
        <h2>My Article title here</h2>
        <p>adadsasdasalsjdhlasdlaksdlaskdhaloskdlasdhlaksdhl
        dkjalsdjlaskdjalksdjlaksjdlaksdjlaksdjlasdjlaksdjlad
        lkasdjlaksdjlaksdjalskdjalskdjalskdjalksdjalksdlskdd
        jhgaofkiafhjgaudfhgnvuajfnapfjudgnapujnvpudfjnvpafuj
        nvoafvnaopjfnvapodfjvnapofjnvaponjvfapojnvapofvnapvp</p>
    </div>
</div>

Спасибо, ShamSandwiches, за то, что помогли мне мыслить нестандартно!:)

Answer 2

img src = "planeswalker.jpg", возможно, придется перейти внутрь div class = "Content", а затем попытаться выровнять все в этом div по левому краю.Надеюсь, это поможет, я думаю, проблема в том, что вы добавили изображение в html напрямую, и оно не изменяется / позиционируется никаким css в данный момент.