Прошу прощения, если мой вопрос покажется глупым. Перепробовала различные свойства, но не могу добиться необходимого эффекта. Сейчас блоки и сам текст внутри по центру, мне же нужно, чтобы и сами блоки и текст внутри был по левому краю. Не могу понять какие свойства конкретно нужно изменить. Пробовала менять justify-content
, align-items
, flex-direction
, но все остается на своих прежних местах совершенно не изменяясь.
И как добиться того, чтобы оба эти блока не выравнивались друг под друга и кнопка "Выбрать" не уезжала вниз, а оставалась сразу под текстом? Привожу код.
HTML:
<div class="pricing pricing--rabten">
<div class="pricing__item">
<h3 class="pricing__title">Тариф</h3>
<p class="pricing__sentence">тариф</p>
<ul class="pricing__feature-list">
<li class="pricing__feature">контент</li>
<li class="pricing__feature">контент</li>
</ul>
</div>
<div class="pricing__item">
<h3 class="pricing__title">Стоимость</h3>
<ul class="pricing__feature-list">
<li class="pricing__feature">Размещение на 6 месяцев</li>
<li class="pricing__feature">Размещение на 1 год</li>
<div class="pricing__price">
<span class="pricing__anim pricing__anim--1">
<span class="pricing__currency">₽</span>12 000
</span>
<span class="pricing__anim pricing__anim--2">
<span class="pricing__period">за год</span>
</span>
</ul>
<button class="pricing__action">Выбрать</button>
</div>
</div>
</section>
</div>
CSS:
.pricing {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: flex-start;
justify-content: flex-start;
width: 100%;
margin: 0 auto 3em;
}
.pricing__item {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
}
.pricing__feature-list {
text-align: left;
}
.pricing__action {
color: inherit;
border: none;
background: none;
}
.pricing__action:focus {
outline: none;
}