дисплей: встроенный блок не работает?

Question

Я работаю на домашней странице этого website и пытаюсь получить категории divs под заголовком для отображения в сетке с 3 div на строку.

Я пытаюсь сделать это с помощью display:inline-block, но я не могу заставить divs показывать горизонтально, только вертикально. Я также пробовал использовать float:left, но у меня была совершенно другая проблема.

Что я могу сделать, чтобы получить эти divs в формате сетки?

Ниже мой HTML для каждого DIV:

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

Ниже мой 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; 
} 

Заранее спасибо за любую помощь!

Answer 1

У вас есть куча <br> тегов в вашем HTML. Это приводит к тому, что элементы разбиваются на следующую строку. Избавься от них.

Answer 2

display: inline-block; работает. Но вы можете добавить padding: 0; и margin: 0; и решите проблему.

HERE IS DEMO