ボックの中の２つのボックスにコンテンツを入れるとカラム落ちしてしまう。

ボックスの中に２つのボックスを用意し、
２つのボックスのそれぞれにコンテンツを入れていきたいです。
（sec3_box2の中のsec3_box2_leftとsec3_box2_rightにコンテンツを入れたいです。）

【HTML】

        <div class="sec3_boxes">
          <div class="sec3_box1">
            <img src="box1_hd_index_001-pc.png" alt="「瓦屋根は地震に弱い･･･」その報道は間違っています。" class="sec3_img1">
            <img src="box1_img_index_003.png" class="sec3_img2">
            <img src="box1_img_index_001-pc.png" class="sec3_img3">
          </div>
          <div class="sec3_box2">
            <p>倒れた家屋。散乱した瓦。阪神・淡路大震災や東日本大震災、そして2016年4月の熊本地震においても、様々なメディアを通じて「瓦屋根の家は地震に弱い」といった報道やイメージが一斉に広がりました。はたして瓦は本当に地震に弱いのでしょうか？<br>
              いいえ。<span>それは大きな誤解です。</span>
            </p>
            <div class="sec3_box2_left">
            </div>
            <div class="sec3_box2_right">
            </div>
          </div>
        </div>

【CSS】

body{
  background-color:#FEFBDB;
  padding:0;
  margin:0 auto;
  font-size: 16px;
  box-sizing: border-box;
}

.sec3_boxes{
  position: relative;
  background-image: url("bg_boxStyle01.png");
  margin-left:36px;
  margin-right:36px;
  height:800px;
  border-radius:10px;
  border:3px solid #B5C9B0;
}

.sec3_box2{
  height:1000px;
  margin:30px 40px 20px 40px;
  text-align:left;
  font-size:0;
}

.sec3_box2 p{
  font-size:16px;
}

.sec3_box2 span{
  font-weight:700;
  color:#099DDF;
}

.sec3_box2_left{
  display:inline-block;
  width:50%;
  background-color: aqua;
  height:300px;
  font-size:16px;
  margin-top:20px;
  box-sizing: border-box;
}

.sec3_box2_right{
  display:inline-block;
  width:50%;
  background-color:yellow;
  height:300px;
  font-size:16px;
  margin-top:20px;
  box-sizing: border-box;
}

https://gyazo.com/f05421c0461dc50b99489e430dd833ff

現状だとこのように見えているのですが、
sec3_box2_leftやsec3_box2_rightにコンテンツを入れるとカラム落ちしてしまいます。

https://gyazo.com/b3f5c487c51c73ea75e7ddad349402f5

.sec3_box2_leftや.sec3_box2_rightの横幅をそれぞれ短くして、
コンテンツを入れてもカラム落ちしてしまう為、親要素の幅を超えたのが原因ではないと思います。

よろしくお願い致します。