Пытаюсь сверстать сайт, блоки наезжают друг на друга?

Question

[Катя]

есть код

<section class="offer">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<h1>Лучшие условия на рынке</h1> 
				</div>
			</div>
			<div class="row">
				<div class="col-md-1"></div>
				<div class="col-md-10">
					<div class="offers">
					фываыфваываыаыафыва
					</div>
					<div class="offers1">
					фывафывафыаыа
					</div>
					<div class="offers2">
					фывафывафыпцупцйупйц
					</div>
				</div>
				<div class="col-md-1"></div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="button_chek">
					<a class="button" href="#">ОЦЕНИТЬ УСЛОВИЯ</a>
					</div>
				</div>
			</div>
	</section>

код css

.offer {
	background-color: #799c95;
	height: 57px;
	width: 100%;
	padding-bottom: 30px;
	text-align: center;
	
}
.offer h1 {
	font-size: 24px;
	color: #fff;
	text-transform: uppercase;
}
.offers {
	text-align: left;
	padding-top: 30px;
	padding-bottom: 30px;
	font-size: 16px;
	border-bottom: 3px solid #799c95;
	padding-left: 100px;
	background-image: url(../img/154.png);
	background-repeat: no-repeat;
	background-position: 20px 15px;
	padding-right: 20px;
}
.offers1 {
	text-align: left;
	padding-top: 30px;
	padding-bottom: 30px;
	font-size: 16px;
	border-bottom: 3px solid #799c95;
	padding-left: 100px;
	background-image: url(../img/153.png);
	background-repeat: no-repeat;
	background-position: 10px 20px;
	padding-right: 20px;
}
.offers2 {
	text-align: left;
	padding-top: 30px;
	padding-bottom: 30px;
	font-size: 16px;
	padding-left: 100px;
	background-image: url(../img/155.png);
	background-repeat: no-repeat;
	background-position: 10px 20px;
	padding-right: 20px;
}

если этот код скопировать несколько раз. выскакивает такая вот штука!

выделила красным наложение, хотя должно быть закрашенно тут

подскажите.
не ругайтесь
где я накосячила

Comments

[Ankhena]

По скринам мало что понятно, но
высота у offer зачем?

Я не поняла, цветной фон должен быть у всех или наоборот только у первого блока?
Если у всех, то уберите высоту у .offer, если только у одного, то именно ему ее и задавайте.

Также разумно выкладывать код в песочницу, например, jsfiddle.net.
Я сделала это для выложенного вами кода: https://jsfiddle.net/npLLLpcL/
Кто куда наезжает?

Answer 1

[Максим]

как минимум не хватало 1 закрывающего div'a перед закрывающим section
https://codepen.io/infernotiv/pen/xpOmPP

Comments

[Максим]

это легко заметить пользуясь каким-нибудь современным редактором кода...

[Катя]

Максим, проверила! был не закрыт

[Катя]

закрыла всё ровно таже история

[Максим]

Катя, а bootstrap подключен правильно? результат ведь должен быть таким ( https://codepen.io/infernotiv/pen/xpOmPP ) ?