Как кнопку сдвинуть к правому углу? И не правильно написан html?

Question

[Ян Уланов]

HTML

<div class="appointment">
      <div class="appointment__container">
        <form action="" class="appointment__forms forms">
          <input class="forms__name input" type="text">
          <input class="forms__email input" type="email">
          <input class="forms__number input" type="number">
          <input class="forms__service input" type="text">
          <textarea class="forms__area" name="" id=""></textarea>
          <input class="forms__button" type="button" value="Make an Appointment">
        </form>
      </div>
    </div>

CSS

.appointment {

    // .appointment__container

    &__container {
    }

    // .appointment__forms

    &__forms {
    }
}
.forms {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 22px;
    column-gap: 22px;
    justify-content: center;
    background-color: #5D62B5;
    // .forms__name

    &__name {
    }

    // .forms__email

    &__email {
    }

    // .forms__number

    &__number {
    }

    // .forms__service

    &__service {
    }
    
    // .forms__area
    &__area {
        width: 470px;
        height: 180px;
        border: 1px #fff solid;
        background: #5D62B5;
        border-radius: 10px;
    }

    // .forms__button
    &__button {
        font-size: 16px;
       padding: 12px 33px;
       background-color: #F2726F;
       border-radius: 10px;
       color: #fff;
       line-height: 1.5;
       font-weight: bold;
       margin: auto 0;
    }
}

.input {
    border: 1px #fff solid;
    background: #5D62B5;
    border-radius: 10px;
    height: 48px;
    flex: 0 1 224px;
}

Comments

[Ян Уланов]

Только у меня нет здесь кода html?

[Ankhena]

Ян Уланов, нет, у всех нет.
Если внимательно посмотреть на окошко редактора вопроса, то там есть кнопочки для форматирования. В частности кнопка для кода.

[Ankhena]

Ян Уланов, во теме вопроса: вот вы написали margin: 0 auto, чтобы центрировать кнопку.
Но вам она нужна справа.
Так на кой черт вы пишете авто марджины с обеих сторон?

[Ян Уланов]

Ankhena, Да то я видимо случайно поставил марджин для .forms__button. Но вопрос опять тот же который и был. HTML тоже нормально вставил

[Ankhena]

Ян Уланов, сделайте песочницу с демонстрацией проблемы и с только левым отступом.
И скринами что не так.

[Ян Уланов]

Ankhena,
Вот. Кнопка должна быть прижата к правому углу.

[Ankhena]

Ян Уланов, и что у неё сейчас в стилях?
Сделайте песочницу на codepen.io или jsfiddle.net или типа того.
Так, чтобы была видна проблема.
Я не знаю, что ещё сказать по скрину, кроме того, что уже сказала.

[Ян Уланов]

Ankhena, &__button {

font-size: 16px;
       padding: 12px 33px;
       background-color: #F2726F;
       border-radius: 10px;
       color: #fff;
       line-height: 1.5;
       font-weight: bold;
    }
}

Вот её стили

[Ankhena]

Ян Уланов, и где левый марджин auto?

[Ян Уланов]

Ankhena, Понял, принял. Работает

[Ян Уланов]

Ankhena, То просто только начал учить вёрстку не шарю за много чего

[Ян Уланов]

Ankhena, Что кстати скажешь по поводу html? Норм или такое?

[Ankhena]

Ян Уланов,
1. Не очевидно зачем нужны две обертки у формы. Одна ну ладно, вдруг там фон на всю ширину окна. А вторая...
2. Кнопки заметно удобнее делать тегом "кнопка" <button>
3. У инпутов должны быть label. Не забываем заботится о пользователях скринридеров.
4. У инпутов должны быть placeholder.
5. У textarea должен быть хоть какой-то вертикальный resize.