0
   <div class="bottom__body">
            <button class="bottom__btn btn">
              <a href="#">Заказать курс</a>
            </button>
            <div class="bottom__finish">
              <div class="finish__top">[![введите сюда описание изображения][1]][1]
                <div class="finish__text">  Учеников всего: </div>
                <div class="finish__number">200</div>
              </div>
              <div class="finish__top">
                <div class="finish__text">  Успешно закончили курс: </div>
                <div class="finish__number">190</div>
              </div>
            </div>
            <div class="bottom__money">
              <div class="finish__toper">
                <div class="finish__text-active">   Заработано учениками: </div>
               <div class="finish__number">400 000₽</div>
              </div>
              <div class="finish__money">
              <div class="finish__start">0</div>
              <div class="finish__end">1 000 000 000</div>
            </div>
            </div>
          </div>
/*----------------------------------------------------------------------------------*/
CSS
.bottom__body {
  display: flex;
}
@media(max-width:1436px){
  .bottom__body{
    flex-direction: column;
  }
}
.bottom__body>*:not(:last-child){
  margin: 0 6.25% 0 0;
}
.bottom__btn{
  background: linear-gradient(94.78deg, #DF5950 11.19%, #451046 93.72%);
  min-height: 44px;
  display: inline-block;
}
.btn{
  padding: 10px 30px;
  border-radius: 50px;
  line-height: 24px;
  color:#fff;
  display: inline-block;
}

.bottom__finish {
  width: 251px;
}
.finish__top {
  line-height: 24px;
  display: flex;
  justify-content: space-between;
}
.finish__text{
  font-weight: 400;
  opacity: 40%;
}
.finish__number {
  align-items: end;
  font-weight: 700;
}
.finish__toper{
  padding-bottom: -2px;
  width: 714px;
  line-height: 24px;
  display: flex;
  border-bottom: 6px solid #fff;
  position: relative;
}
.finish__toper::after{
    position: absolute;
    content: "";
    width: 440px;
    height: 6px;
    background: linear-gradient(94.78deg, #DF5950 11.19%, #451046 93.72%);
    bottom: -6px;
    z-index: 2;
}
.finish__text-active{
  margin: 0px 30px 0px 0px;
}
.finish__money{
  margin: 5px 0px 0px 0px;
  display: flex;
  justify-content: space-between;
  width:714px;
}

1 ответ 1

1

Нужно для .bottom__btn (или для .btn) задать максимальную ширину в пикселях или процентах:

.bottom__btn {
  max-width: 300px;
}

Если вы потом захотите, чтобы она была выравнена по центру, то добавьте еще align-self: center:

.bottom__btn {
  align-self: center;
}
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.