Centering <ul> tag

I can't get this unordered list gallery to center up in the page. I've tried all sorts of suggestions from sof&google but I still can't get it right. Plz help. Thanks!

Here is the CSS that i wrote.

#galleryArea {
  display: inline-block;
  width: 90%;
  margin: 0 auto;
}
#gallery {
  list-style: none;
}
#gallery img {
  width: 100%;
  height: auto;
  max-width: 250px;
  max-height: 250px;
}
#gallery li {
  float: left;
  width: 25%;
  margin: 0 1.6%;
  text-align: center;
}
#gallery a {
  color: black;
}

<body>
  <div id="galleryArea">
    <ul id="gallery">
      <a href="#">
        <li>
          <img src="img/img.png" />
          <p>Desc...</p>
        </li>
      </a>
      <a href="#">
        <li>
          <img src="img/img.png" />
          <p>Desc...</p>
        </li>
      </a>
      <a href="#" class="clearFloat">
        <li>
          <img src="img/img.png" />
          <p>Desc...</p>
        </li>
      </a>
      <a href="#">
        <li>
          <img src="img/img.png" />
          <p>Desc...</p>
        </li>
      </a>
      <a href="#">
        <li>
          <img src="img/img.png" />
          <p>Desc...</p>
        </li>
      </a>
      <a href="#">
        <li>
          <img src="img/img.png" />
          <p>Desc...</p>
        </li>
      </a>
    </ul>
  </div>
</body>

Solution

Replace this:

#galleryArea {
    display: inline-block;
    width: 90%;
    margin: 0 auto;
}

By this:

#galleryArea {
    display: block;
    width: 90%;
    margin-left: auto;
}

Here is the JSFiddle demo