display：inline-block不起作用？

Question

I'm working on the homepage of this website 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 1

You have a bunch of <br> tags in your HTML. This causes the elements to break to the next line. Get rid of them.

Answer 2

display: inline-block; is working. But you can add padding: 0; and margin: 0; and will solve the problem.

HERE IS DEMO