Соседний блок применяет свойства соседнего блока, как исправить?

Question

[Роман]

Всем привет. Есть два блока с одинаковыми классами .seventh_block. Одному из них задал класс .seventh_block_active, применил ему background и height. Background встал нормально, а вот свойство height наследуется почему то и соседним блоком .seventh_block, а мне так не нужно.. Почему так происходит? И как исправить?

<div class="col-lg-7 ml-auto">
					<div class="seventh_blocks text-center d-flex">
						<div class="seventh_block seventh_block_active">
							<h3 class="seventh_block_title">Starter</h3>
							<span class="seventh_block_price">Free</span>
							<p class="seventh_block_text">Build your schedule<br> every day</p>
							<div class="seventh_block_list">Unlimeted events</div>
							<div class="seventh_block_list">Connect Dropbox & Evernote</div>
							<button class="seventh_block_btn seventh_block_btn_margin">Get started</button>
						</div>
						<div class="seventh_block">
							<h3 class="seventh_block_title">Pro</h3>
							<span class="seventh_block_price">$4.99</span>
							<p class="seventh_block_text">Make your life<br>
							better</p>
							<div class="seventh_block_list">Unlimeted events</div>
							<div class="seventh_block_list">Connect Dropbox & Evernote</div>
							<div class="seventh_block_list">Personal Assistant</div>
							<button class="seventh_block_btn">Make me a Pro</button>
						</div>
					</div>
				</div>

.seventh_block_list:before {
	font-family: 'FontAwesome';
	content: '\f00c';
	color: #6fc754;
	margin-right: 7px;
}
.seventh_block_title {
	font-size: 32px;
	font-weight: 400;
	margin-bottom: 30px;
}
.seventh_block_price {
	border: 1px solid #d4d4d5;
	border-radius: 30px;
	padding: 5px 17px;
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	margin-top: 25px;
	margin-bottom: 50px;
}
.seventh_block_text {
	font-size: 20px;
	color: #8c8f94;
	margin-top: 50px;
	margin-bottom: 30px;
}
.seventh_block {
	background: #ebebed;
	padding: 60px 40px;
}
.seventh_block_list {
	font-size: 16px;
	margin-bottom: 25px;
}
.seventh_block_btn {
	padding: 5px 0 5px 0;
	width: 210px;
	border-radius: 40px;
	background: transparent;
	border: 1px solid #267df4;
}
.seventh_block_btn {
	margin-top: 50px;
	color: #267df4;
}
.seventh_block_btn_margin {
	margin-top: 99px;
}
.seventh_block {
	border-radius: 15px;
}
.seventh_block_active {
	background: #fff;
}
.seventh_block {
	margin-top: 178px;
	margin-left: 1px;
}
.seventh_blocks {
	padding: 1px;
}

Comments

[Алексей Уколов]

Одному из них задал класс .seventh_block_active, применил ему background и height.

.seventh_block_active {
  background: #fff;
}

Нет там высоты. Её вообще в приложенных стилях нет.

Answer 1

[Andrej Sharapov]

У вас код кривой и не структурированный + в нем нет атрибута height. Чтобы выделить "Pro" поменяйте местами active и можно будет сделать нечто такое,

Comments

[Роман]

Почему он кривой и не структурированный? Мне нужно именно чтобы фон у активного был белым. Далее это все нужно будет связать с бегунком слева посредством jquery.

[Andrej Sharapov]

потому что у вас отсутствует иерархия + вы повторяете одни и те же классы, добавляя им по одному-два класса...
цвета меняйте как хотите)

[Роман]

Andrej Sharapov, так если у них стили одинаковые, зачем задавать разные классы? Мне этот макет адаптировать не нужно. Поэтому и упростил максимально работу себе.. Макет взял чисто jquery потренировать..