テキストありの画像を横並びに方法

liタグの要素にテキストを挿入したコンテンツを横並びにしたいです。
float,display など試してみたのですが思うようにいきません。

現状のコードは下記になります。

<div class="content">
 <h2>イベント</h2>
  <ul class="box-list">
   <li class="box-item"></li><br>テキストテキストテキストテキストテキストテキスト
   <li class="box-item"></li><br>テキストテキストテキストテキストテキストテキスト
   <li class="box-item"></li><br>テキストテキストテキストテキストテキストテキスト
  </ul>
</div>

.content {
 margin-left:100px;
  margin-right: 100px;
 text-align: left;
}

.box-list li {
  list-style: none;
  width: 200px;
  height: 200px;
  background-color: black;
  text-align: left;  
}

この三つのボックスをよこにならべ、テキストは下に来るようにレイアウトしたいと考えています。

また、合わせて教えて頂きたいのですが、下記の画像のお知らせ欄とイベント欄のコンテンツの位置を左に揃えたいのですが、どうしてもイベント欄の方は、多く余白が出てしまいます。
マージンなども設定しましたが、うまく効きません。
こちらもお手数ですが、教えて頂きたいです。

宜しくお願いします！

※追記です
説明不足で申し訳ありません！
お知らせ欄のコードです。
お知らせ、イベントの左右の余白を合わせたいです。

<section>
  <h2 class="info-title">お知らせ</h2>
  <ul class="info-list">
    <li class="info-item">
      <time class="date" datetime="2018-06-27">2018年6月27日</time>
      <span class="category news">NEWS</span>
      <span class="section"><a href="#">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></span>
    </li>
     <li class="info-item">
      <time class="date" datetime="2018-06-27">2018年6月27日</time>
      <span class="category product">PRODUCT</span>
      <span class="section"><a href="#">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></span>
    </li>
     <li class="info-item">
      <time class="date" datetime="2018-06-27">2018年6月27日</time>
      <span class="category news">NEWS</span>
      <span class="section"><a href="#">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></span>
    </li>
    <li class="info-item">
      <time class="date" datetime="2018-06-27">2018年6月27日</time>
      <span class="category product">PRODUCT</span>
      <span class="section"><a href="#">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></span>
    </li>
  </ul>
</section>

<!--main 終わり-->
<div class="content">
 <h2>イベント</h2>
  <ul class="box-list">
   <li class="box-ietm"><br>テキストテキストテキストテキストテキストテキスト</li>
   <li class="box-ietm"><br>テキストテキストテキストテキストテキストテキスト</li>
   <li class="box-ietm"><br>テキストテキストテキストテキストテキストテキスト</li>
  </ul>
</div>

section {
  margin-left:100px;
  margin-right: 100px;
}

h2 {
  text-align: center;
}

.info-title {
  border-bottom: 2px solid #0066FF;
  padding-bottom: 50px;
  padding-top: 20px;
}

.info-list {
  list-style: none;
  text-align: left;
  margin: 0;
  padding: 0;
}

.info-item{
  clear: both;
  margin-bottom: 30px;
  margin-top: 30px;
  border-bottom: 2px solid #F5F5F5;
  padding-bottom: 20px;
}

.info-item > .date{
    float: left;
  font-size: 15px;
  display: table-cell;
}

.info-item > .category{
    float: left;
    margin-left: 30px;
    font-size: 5px;
    margin-top:3px;
}

.info-item > .section{
    display: block;
    margin-left: 300px;/* ここの幅は好きなように調整してください */
    font-size: 17px;
}

.info-item a{
  color:gray;
  text-decoration:underline;
}

.info-item > .news {
  background-color: #00BFFF;
  padding-right: 10px;
  padding-left: 10px;
  color: white;
  width: 50px;
  text-align:center;
}

.info-item > .product {
  background-color: #FFA500;
  color: white;
  padding-right: 10px;
  padding-left: 10px;
  width: 50px;
  text-align: center;
}

.content {
 margin-left:100px;
  margin-right: 100px;
 text-align: left;
}

.box-list li {
  list-style: none;
  width: 200px;
  height: 200px;
  background-color: black;
  text-align: left;  
}

長くなってしまいましたが、お願いします。