在体内问题中居和对齐块

Question

我尝试了很多不同的技术，使用浮点数，显示：内联块等，但我无法解决这个问题。

这是我的问题：

我在父div中有两个块，1个旁边和1个div。我希望旁边和div块在父级内部对齐并居中。我已经为你编写了一个Codepen来尝试我的代码： http://codepen.io/acanana/pen/xbOXar

这是我的HTML：

<div id="content">
  <aside id="sidebar">
    <p>NaN est un label de musique électronique créé par 45ampm et ACAN.</p>
  </aside>

  <div id="main">
    <section id="masonry">
      <div class="item"><img src="http://lorempixel.com/300/310" /></div>
      <div class="item"><img src="http://lorempixel.com/300/310" /></div>
      <div class="item"><img src="http://lorempixel.com/300/310" /></div>
    </section>
</div>

我的CSS：

#content {
  max-width: 1320px;
  margin: 0 auto;
}

#sidebar {
  width: 400px;
  margin: 0 auto;
  padding-right: 100px;
}

#main {
  float: left;
  max-width: 920px;
  margin: 0 auto;
  background-color: yellow;
}

#masonry {
  margin: 0 auto;
}

.item {
  width:  300px;
  height: 310px;
  margin-bottom: 10px;
}

内部div包含一个Masonry容器，我怀疑我的问题来自这个容器。 你能帮我个忙吗？谢谢！