liを使って横並びにする方法

Question

##ulとliを使って画像左のようなコーディングをしたいです。

画面幅を変えてもこのレイアウト表示になります。
（画面幅を変えても緑のマージンが変わらない）

自分が作業すると緑のマージンが変わってしまいます・・。。画像左です。

nth-childを使ってフロートさせています。

画像左のようなコーディングはdivを使えばできるのですが、liを使った場合
2個で1列になる仕組みが分かっておりません。
それぞれをulでくくるのはスマートなやり方ではない&nth-childを使う意味が無くなるのでやっておりません。
作業しすぎて頭がこんがらがってきました・・(泣)

どなたか確認して頂けますでしょうか。

###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード

<div class="pageContents">
  <ul class="col-2">
    <li>
      <div class="colPicture">
        <img src="http://placehold.it/280x200" alt="">
      </div>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
    </li>
    <li>
      <div class="colPicture">
        <img src="http://placehold.it/280x200" alt="">
      </div>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
    </li>
    <li>
      <div class="colPicture">
        <img src="http://placehold.it/280x200" alt="">
      </div>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
    </li>
    <li>
      <div class="colPicture">
        <img src="http://placehold.it/280x200" alt="">
      </div>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
    </li>
  </ul>
</div>

.pageContents {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 20px 10px 0 10px;
  background: pink;
}

.pageContents ul {
  width: 100%;
}

.pageContents ul li {
  float: left;
  width: 280px;
  padding-right: 14px;
  padding-bottom: 20px;
  padding-left: 14px;
}

.pageContents ul li:nth-child(2n) {
  float: right;
}

.pageContents .colPicture {
  width: 280px;
  height: 200px;
  height: auto;
  margin-bottom: 20px;
}

Answer 1

以下、お試しください。

.pageContents ul li:nth-child(2n) {
  clear: right;
}

Answer 2

ようるするに、ulの幅はずっと一緒が良いということですよね？
で、それがセンタリングされているのだとすれば、
Script必須になっちゃいますが、以下のように…

<div id="box">
  <ul>
    <li>
      <div><img></div>
      <p></p>
    </li>
    <li>個数分繰り返し</li>
  </ul>
</div>

#box {
  width:100%;
  text-align:center;
}
#box ul li {
  display:inline-block;
  padding:0 14px 20px 14px;
}
#box ul li p {
  text-align:left;
}

最後に、Script適用
配布元はこちら

<script src="js/jquery.matchHeight-min.js"></script>
<script>
$(function() {
    $('#box ul li p').matchHeight();
});
</script>