Kriewitz

Практикуюсь в верстке, делаю автомобильный сайт.Имеются 5 категорий.Необходимо сделать их в виде квадратов определённых размеров (некликабельные картинки, на фоне), а на переднем плане по-середине них ссылки в обычном виде (Кликабельное слово с text-decoration: none).Квадраты на равном друг от друга расстоянии.Не могу понять как реализовать, постоянно вверх боковые съезжают. Вот контейнер, в котором это всё дело находится и моя рукопись <section> <div class="container"> <div class="nav"><div class="usenav"> <h2>ВОСПОЛЬЗУЙТЕСЬ НАВИГАЦИЕЙ</h2> </div> <div class="block clearfix"> <div class="block_item"> <a href="#">Автоаксессуары</a> <img src="/img/4393krjgf535.jpg" alt=""> </div> <div class="block_item"> <a href="#" class="block_item">Автоэлектроника</a> </div> <div class="block_item"> <a href="#" class="block_item">Авточехлы</a> </div> <div class="block_item"> <a href="#" class="block_item">Дефлекторы</a> </div> <div class="block_item"> <a href="#">Тюнинг</a> </div> </div> </div> </section> .usenav { padding-top: 70px; } .usenav h2 { margin: 0; color: #000; text-align: center; text-transform: uppercase; padding-top: 70px; } .block { margin: 0 auto; padding-top: 50px; } .block_item { text-align: center; color: #000; text-decoration: none; text-transform: uppercase; padding: 20px 0; width: 240px; height: 240px; float: left; } .block_item:last-child { float: right; } .block_item:nth-child(2) { margin-left: 5px; } .block_item:nth-child(3) { margin-left: 5px; } .block_item:nth-child(4) { margin-left: 5px; }