Some problems with CSS alignment.

The short, quick answer is that the margin you've given your li elements is causing them to be wider than what you think they are. They are, in fact, 25% wide, but the margin adds 3.2% width to that (1.6% on each side), so the fourth item ends up flowing down to the second row, causing them to appear partially aligned to the left, but not completely.

To fix this, swap your margin property out for padding, and add this snippet to the top of your stylesheet:

*,
* > *:before,
* > *:after {
    box-sizing: border-box;
}

This snippet changes the CSS box model for everything on the page so that the width property includes not only the explicit width you define, but also the width of any padding and border you give the element. Thus, the browser will know to include your padding in your width when it calculates the true width of your gallery item. If you're confused about any of this, CSS tricks has a page dedicated to explaining it.

(In case you're wondering, using the * selector is usually not recommended, but in this case, it's fine.)

You have a couple of additional problems here. First and foremost, the ul and ol elements cannot contain any elements other than li, and li elements may only be placed inside ul and ol elements (and the menu element, to be precise, but that's for another day). You can solve this by placing your a tags inside your li tags instead of outside. You may also have to adjust your styles accordingly.

Second, a elements display as inline elements by default. This means that they will stick to the left no matter what, and that you won't be able to give them top or bottom margin. Try setting their display to block. This may not fix the problem you're having, but it will probably help with other issues down the road.

Third, the float: left in your #gallery is ringing the clearfix alarm in my head. Since your #gallery contains only floated child elements, it will collapse to a height of 0. The same thing will happen to your #galleryArea. If this is your first time hearing about it, it's a legendary bug with floats that's been around for a decade or so. There are a lot of ways to fix this one: just Google clearfix and you should come up with a lot. This one seems pretty legit to me:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

To use it, just give your #gallery and #galleryArea elements the clearfix class.

Finally, your #gallery-area should really be display: block. Otherwise, the margin: 0 auto trick won't work, as inline-block elements do not support the auto value for the margin property.

In case you're confused by any of that, here's a CodePen to help you out. Hope that helps!

Try replacing

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

With

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

As seen here...

#galleryArea {
    display: block;
    width: 90%;
    margin-left: 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;
}

ul{
    margin-left:auto;
    margin-right:auto;

}

See it in action here: http://jsfiddle.net/eaf64k4a/

i think you have to set the width to 80% because it can be centered with 10% space on each size?