Мои гибкие коробки неправильно выравниваются или перекрываются

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

Левая сторона должна занимать 60% доступного экрана, а правая — остальные 40%.

Я решил использовать flexbox, так как думал, что это значительно облегчит мою жизнь, помещая коробки внутри коробок и так далее.

Как показано в приведенном ниже коде, у меня есть левый флексбокс на width: 60%; и изображение внутри него на width: 100%;, так что оно занимает 100% доступного пространства в этих 60%. Моя главная проблема возникает, когда я добавляю второй флексбокс. Я также ставлю ему width: 40%;, но он начинает перекрывать другой флексбокс.

Я также попытался явно указать родителю ширину 100%, чтобы он правильно делился, как только я доберусь до дочерних элементов, но это ничего не дало...

Проект должен выглядеть так:

Желаемый результат

Но самое большее, чего я достиг сам, это:

Текущий результат

Раздел HTML того, над чем я сейчас работаю:

      <div class = "mid_content">
        <div class = "box_1">
          <img
            src = "./resources/capstone_colmar_assets/images/information-main.jpg"
            alt = "Man in a white sweater reading a book"
          />
          <h2>It doesn't hurt to keep practicing.</h2>
          <p>
            "Curabitur vitae libero in ipsum portitor consequat. Aliquam et
            commodo lectus, nec consequat neque. Sed non accumsan urna.
            Phasellus sed consequat ex. Etiam eget magna laoreet, efficitur
            dolor consequat, tristique ligula.
          </p>
          <br />
          <br />
          <footer>Emanuel, Sr Strategist at Hiring-com</footer>
        </div>
        <div class = "box_2">
          <div class = "box_2_1">
            <img
              src = "./resources/capstone_colmar_assets/images/information-orientation.jpg"
              alt = "Birdseye view of people walking "
            />
            <div class = "asidetext">
              <h3>Orientation Date</h3>
              <p>Tue 10/11 &amp; Wed 10/12: 8am-3pm</p>
              <a href = "#">Read more</a>
            </div>
          </div>
          <div class = "box_2_2">
            <img
              src = "./resources/capstone_colmar_assets/images/information-campus.jpg"
              alt = "Study room with a map of South America on the wall"
            />
            <div class = "asidetext">
              <h3>Our Campus</h3>
              <p>Find which campus is close by you</p>
              <a href = "#">Read more</a>
            </div>
          </div>
          <div class = "box_2_3">
            <img
              src = "./resources/capstone_colmar_assets/images/information-guest-lecture.jpg"
              alt = "Bearded guy older goy wearing glases and a hat turning back"
            />
            <div class = "asidetext">
              <h3>Our guest lecture</h3>
              <p>
                Join a keynote with Oliver Sack about music in medical treatment
              </p>
              <a href = "#">Read more</a>
            </div>
          </div>
        </div>
      </div>

и CSS следующий (у меня есть CSS для сброса, но я не думаю, что проблема в том, что я отлично работаю над другими разделами кода, и это базовый сброс Meyerweb, который не предписывает иначе препятствовать каким-либо другой способ:

.mid_content {
  display: flex;
  width: 100%;
  margin-top: 2rem;
}

.box_1 {
  display: flex;
  width: 60%;
  flex-flow: column wrap;
}

.box_1 img {
  width: 100%;
  height: auto;
  padding: 0 1.5rem 2rem 1.5rem;
}

.box_2 {
  display: flex;
  width: 40%;
  flex-flow: column;
}

.box_2 img {
  width: 30%;
  height: auto;
  padding: 1rem;
}

.box_2_1 {
  display: flex;
  align-items: center;
}

.box_2_1 img {
  padding-top: 0;
}

.box_2_2 {
  display: flex;
  align-items: center;
}

.box_2_3 {
  display: flex;
  align-items: center;
}

Кроме того, здесь новинка, поэтому, если есть лучший способ вставить сюда мой код, дайте мне знать.