Question: I'm working on the homepage of this [website](http://ceramicsbysolo.com/) and trying to get the category divs under the header to display in a grid, with 3 divs per row.

I'm trying to do so using `display:inline-block`, but I can't seem to get the divs to show horizontally, only vertically. I've tried using `float:left` as well, but was having an entirely different issue with that.

What can I do to get these divs in a grid format?

Below is my html for each div:

```
<br /><a href="URL"><div class="home_cat" style="background-image:url('IMAGEURL');">
<p class="home_cat_link">Category Name</p></div></a>

```

Below is my css:

```
.home_cat {
background:#14A1C4;
height:180px;
width:29%;
display:inline-block;
margin:5px;
padding:5px;
}

.home_cat_link {

font-size:3em;
font-family: 'Permanent Marker', cursive;
color:#000;
padding-top:80px;
text-align:center;
}

```

Thanks in advance for any help!

Answer: 
You have a bunch of [`<br>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br) tags in your HTML. This causes the elements to break to the next line. Get rid of them.
`display: inline-block;` is working. But you can add `padding: 0;` and `margin: 0;` and will solve the problem.

**[HERE IS DEMO](http://jsfiddle.net/Rochefort/hc1r4k0j/)**