Новый div делается поверх старого. Что делать?

Question

[Rufix]

Сделал вот такой блок, пришло его делать через абсолютное позиционирование.

spoiler

Доделал блок. Пришло время приступать к следующему. Но этот новый элемент у меня делается поверх прошлого, еще и когда я пишу "text-align:center" он делается по центру относительно левой картинки. Кароче, вообще ничего не понимаю и не знаю как это исправлять.

spoiler

spoiler

<div class="banners">
		<div class="container">
			<div class="banners__item">
				<img src="img/banner1.png" alt="banner" class="banners__item_first_img">
				<a href="#" class="banners__item_first_link">Смотреть</a>
			</div>
			<div class="banners__item_right">
				<a href="#"><img src="img/banner2.png" alt="banner" class="banners__item_second"></a>
				<a href="#"><img src="img/banner3.png" alt="banner" class="banners__item_third"></a>
			</div>
		</div>
	</div>
	<div class="goods">
		<div class="container">
			<h2 class="goods_title">Популярные товары</h2>
		</div>
	</div>

.banners__item_first_img{
	position: absolute;
	z-index: -1;
}

.banners__item_first_link{
	display: block;
	color: #313131;
	z-index: 1;
	text-transform: uppercase;
	font-weight: 500;
	padding: 10px 20px;
	border: 2px solid #bc8c30;
	background-color: #fff;
	margin-left: 50px;
	position: absolute;
	margin-top: 280px;
}

.banners__item_first_link:hover{
	background-color: #bc8c30;
	color: #fff;
	transition: 0.5s;
}

.banners__item_right{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-flow: column;
	-ms-align-items: center;
	align-items: center;
}

.banners__item_right{
	float: right;
}

.banners__item_third{
	margin-top: 29px;
}


.goods_title{
	text-align: center;
}