Блок с информацией занял всю ширину

185
06 сентября 2018, 09:40

Подскажите пожалуйста, где ошибка в коде? Надо чтобы было как на картинке, но в браузере блок с ценой расположен под блоком с информацией.

.wrapper{ 
	max-width: 1250px; 
	width: 100%; 
	margin: 0 auto; 
	padding: 0px 40px; 
} 
 
.service-list_item h6{ 
	margin-bottom: 25px; 
} 
 
.service-list_item p{ 
	color: #737373; 
	font-size: 16px; 
	line-height: 28px; 
} 
 
.box-pricing{ 
	display: flex; 
} 
 
.box-pricing .service-list_icon{ 
	margin-left: 0; 
	height: 125px; 
	width: 125px; 
	font-size: 32px; 
} 
 
.pricing{ 
	display: flex; 
	text-align: center; 
} 
 
.pricing-item{ 
	border: 1px solid #e6e6e6; 
} 
 
.pricing-item:first-child{ 
	border-right: none; 
} 
 
.pricing-item:last-child{ 
	border-left: none; 
} 
 
.pricing-header{ 
	padding: 25px 28px; 
} 
 
.pricing-header_title{ 
	color: #0d0d0d; 
	font-size: 22px; 
	font-weight: 700; 
	line-height: 25px; 
	text-transform: uppercase; 
} 
 
.pricing-header_title span::before{ 
	content: ''; 
	display: block; 
	width: 50px; 
	height: 2px; 
	background-color: #f39c12; 
}
<div class="box-pricing"> 
		<div class="wrapper"> 
			<div class="service-list_item"> 
				<div class="service-list_icon"><span class="icon-banknote"></span></div> 
				<h6>Packege Pricing</h6> 
				<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec  
				sagittis sem nibh id elit. </p> 
			</div> 
 
			<div class="pricing"> 
				<div class="pricing-item"> 
					<div class="pricing-header"> 
						<span class="pricing-header_title">Basic  
							<span class="">$35</span> 
						</span> 
					</div> 
					<ul class="pricing-list"> 
						<li></li> 
						<li></li> 
						<li></li> 
						<li></li> 
					</ul> 
					<div class="pricing-footer"><a href="#" class="btn"></a></div> 
				</div> 
				<div class="pricing-item"> 
					<div class="pricing-header"> 
						<span class="pricing-header_title">Gold  
							<span class="">$99</span> 
						</span> 
					</div> 
					<ul class="pricing-list"> 
						<li></li> 
						<li></li> 
						<li></li> 
						<li></li> 
					</ul> 
					<div class="pricing-footer"><a href="#" class="btn"></a></div> 
				</div> 
				<div class="pricing-item"> 
					<div class="pricing-header"> 
						<span class="pricing-header_title">Silver 
							<span class="">$65</span> 
						</span> 
					</div> 
					<ul class="pricing-list"> 
						<li></li> 
						<li></li> 
						<li></li> 
						<li></li> 
					</ul> 
					<div class="pricing-footer"><a href="#" class="btn"></a></div> 
				</div> 
			</div> 
		</div> 
	</div>

Answer 1

Добавь display:flex к .wrapper.

Answer 2

.wrapper { 
  display: flex; 
  max-width: 1250px; 
  width: 100%; 
  margin: 0 auto; 
  padding: 0px 40px; 
} 
 
.service-list_item h6 { 
  margin-bottom: 25px; 
} 
 
.service-list_item p { 
  color: #737373; 
  font-size: 16px; 
  line-height: 28px; 
} 
 
.box-pricing { 
  display: flex; 
} 
 
.box-pricing .service-list_icon { 
  margin-left: 0; 
  height: 125px; 
  width: 125px; 
  font-size: 32px; 
} 
 
.pricing { 
  display: flex; 
  text-align: center; 
} 
 
.pricing-item { 
  display: flex; 
  align-items: center; 
  flex-direction: column; 
  border: 1px solid #e6e6e6; 
} 
 
.pricing-item:first-child { 
  border-right: none; 
} 
 
.pricing-item:last-child { 
  border-left: none; 
} 
 
.pricing-header { 
  padding: 25px 28px; 
} 
 
.pricing-header_title { 
  display: block; 
  position: relative; 
  color: #0d0d0d; 
  font-size: 22px; 
  font-weight: 700; 
  line-height: 25px; 
  text-transform: uppercase; 
} 
 
.pricing-header_title span::before { 
  content: ''; 
  display: block; 
  width: 50px; 
  height: 2px; 
  background-color: #f39c12; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
}
<div class="box-pricing"> 
  <div class="wrapper"> 
    <div class="service-list_item"> 
      <div class="service-list_icon"><span class="icon-banknote"></span></div> 
      <h6>Packege Pricing</h6> 
      <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. </p> 
    </div> 
    <div class="pricing"> 
      <div class="pricing-item"> 
        <div class="pricing-header"> 
          <span class="pricing-header_title">Basic  
							<span class="">$35</span> 
          </span> 
        </div> 
        <ul class="pricing-list"> 
          <li>1</li> 
          <li>2</li> 
          <li>3</li> 
          <li>4</li> 
        </ul> 
        <div class="pricing-footer"> 
          <a href="#" class="btn"></a> 
        </div> 
      </div> 
      <div class="pricing-item"> 
        <div class="pricing-header"> 
          <span class="pricing-header_title">Gold  
							<span class="">$99</span> 
          </span> 
        </div> 
        <ul class="pricing-list"> 
          <li>1</li> 
          <li>2</li> 
          <li>3</li> 
          <li>4</li> 
        </ul> 
        <div class="pricing-footer"> 
          <a href="#" class="btn"></a> 
        </div> 
      </div> 
      <div class="pricing-item"> 
        <div class="pricing-header"> 
          <span class="pricing-header_title">Silver 
							<span class="pricing-item_price">$65</span> 
          </span> 
        </div> 
        <ul class="pricing-list"> 
          <li>1</li> 
          <li>2</li> 
          <li>3</li> 
          <li>4</li> 
        </ul> 
        <div class="pricing-footer"> 
          <a href="#" class="btn"></a> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

READ ALSO
Хочу сделать валидацию и отправку формы на чистом css+js, по получаю ошибки

Хочу сделать валидацию и отправку формы на чистом css+js, по получаю ошибки

Есть форма отправкиПытаюсь сделать валидацию и иммитацию отправки формы (со страницы не должно перебрасываться, а просто над кнопкой отправить...

202
Как прописать в коде, какую спецификацию javascript я использую?

Как прописать в коде, какую спецификацию javascript я использую?

Использую node js на сервере (с помощью) PassengerУстановил версию 9

222
Проверка формы на кол-во символов JS [закрыт]

Проверка формы на кол-во символов JS [закрыт]

Есть форма с логином и паролемПоле с паролем закрыто и должно открыться после ввода 5 символов в поле с логином, а кнопка входа открыться после...

177