Centre a responsive thumbnail gallery

Question

Here is my site:

http://www.gregorydanelian.comule.com/ken

I want thumbnail gallery to be centred at all times but I am having trouble doing this.

I know I can use

text-align: center;

On the parent element and then set the thumbnails like so:

display: inline-block;

However nothing is working, the thumbnails always float left.

I have tried adding media queries to force the margin from left (for example):

@media (max-width: 767px) {
.thumbnails{
margin-left: 40px!important;   
}
}

But there must be an easier way to just get the ul to centre no matter what the width is.

How can I centre the thumbnail gallery on all browser widths?

Answer 1

Add these changes and remove those left-margins you set !important on ul

.thumbnails > li {
  display: inline-block;
  float: none;
  margin-bottom: 20px;
  margin-left: 20px;
}

.thumbnails {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

Important: Add this to end of your css/mystyles.css file.