How to Center Masonry Container

Question

I'm trying to center a masonry container on a page. At the moment, it's aligned to the left. I have margin auto in my CSS and isFitWidth: true in JS, but neither seems to be doing anything. I've also tried putting display:block in my CSS. This is the HTML; ```

Storyville Entertainment

Ugly Duckling Organic Farm

Underdonk

Accepted Answer

Try this in the css:

```
.masonry_item {
  width:300px;
  margin:0 auto 20px auto;
  padding:20px;
}
```

EDIT

I didn't read this correctly the first time. If you want to center the actual container you will need to set a fixed size for the container instead of 100%. Maybe 500px. Then remove the display: inline-block from the .group class. That should do it.

How to Center Masonry Container

Solution

Problem