Why do two different divs with 100% total width make one go down and not side by side?

Here’s what I’m trying to achieve.

And here’s the result I get.

Here’s the relevant html

  <div class="s2-r1">
    <img src="./Images/information-orientation.jpg" alt="student orientation">
    <div class="r-content">
      <h2>Orientation date</h2>
      <p>Tue 10/11 & Wed 10/12: 8am-3pm</p>
      <a href="3" class="more">Read more</a>
    </div>
  </div>

and css

.r-content {
    width: 65%;
}

.section2-right img {
    width: 35%;
    height: auto;
    margin: 16px 16px;
}

I’m trying to have the text show next to the picture, but it goes down. What am I missing?

Thank you for any help.

>Solution :

That’s because you are using margin.

That means 35% + margin + 65% = more than 100%.