I apologize if my question seems stupid. I tried various properties, but I can not achieve the desired effect. Now the blocks and the text itself are centered inside, but I need the blocks themselves and the text inside to the left. I can not understand what properties specifically need to change. I tried to change justify-content , align-items , flex-direction , but everything remains in its original places completely unchanged.
And how to ensure that both of these blocks are not aligned to each other and the "Select" button does not go down, but remains immediately below the text? I give the code.
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; } 
