Несколько ссылок в линию с разным фоном

[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;
}

 

[Switch74]

https://jsfiddle.net/t38osyb2/