Html – My flex-boxes are not aligning properly / overlapping

I’m working on a section of a basic website that requires an image and text on the left and other smaller boxes on the right side.

The left side is supposed to take 60% of the available screen and the right side the other 40%.

I decided to use flexbox since I thought it would make my life a lot easier by basically putting boxes inside boxes and so on.

As the provided code below will show, I have the left flexbox on a width: 60%; and the image inside it a width: 100%; so that it takes 100% of the space available in that 60%. My main problem comes when I bring the second flexbox in. I also give it a width: 40%; but it starts to overlap the other flexbox.

I also tried explicitly giving the parent a width of 100% so that is would divide properly once I got to the children but that didn’t do anything…

The project is supposed to look like this:

Desired outcome

But the furthest I got by myself is this:

Current outcome

The HTML section for what I’m currently working on is:

      <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>

and the CSS is as follows (I have a reset CSS but I don’t think that the issue, I’ve been working on other sections of the code just fine and it’s the basic meyerweb reset that does not instruct otherwise of obstruct in any other way:

.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;
}

Also, new here, so if there is a better way to paste my code here please let me know.