【HTML】columnで横を2つに分けたがその間に空白を入れたい

Question

HTMLで左右にそれぞれ画像と文章を入れたページを実装したいのですが、実装すると中央に余白が無く窮屈になってしまいました。

この間に空白を入れたいのですが、どこを変更したらいいのか分からず教えて頂けませんでしょうか？
Marginかなと思って、CSSの中にMarginを入れたのですが、それも想像通りに動作せず、何をしたらいいのか分からなくなってしまいました。

実際に入れているコードを記載いたします。

<div class="container">
  <div class="column--l">

  左側記載画像

  </div>
  <div class="column--r" align="left">

  右側記載文章

  </div>
</div>

.column--l, .column--r {
  width: 100%;
}

@media (min-width: 1024px) {
  .column--l {
    width: 45%;
  }
  .column--r {
    width: 50%;
  }
}

Comments

[hatena19]

提示のコードでは画像と文章が左右にはなりません。現象の再現できるコードを提示してください。