Практикуюсь в верстке, делаю автомобильный сайт.Имеются 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;
}
