Как выровнять элементы по центру?

Question

У меня два вопроса.

сначала,

У меня есть форма, и я пытаюсь центрировать все по центру и одновременно выровнять текст по левому краю.сторона полей.

Я пытался указать justify-center и align-items для класса "container" и для класса "form-style", и ничего не работает.

Partкода и Codepen ссылка

.form-style {
  width: 50%;
  position: relative;

   display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;

И,

.container {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  }

Второе,

Я пытаюсь сделать мою кнопку отправкичтобы получить 100% ширину и ничего - по бокам есть место,

input[type="submit"] {
  display: block;

  background-color: #08ABD9;
  font-family: 'jura', sans-serif;
  font-size: 16pt;
  font-weight: bold;

  height: 40px;
  border: none;
  margin-top: 40px;
  margin-bottom: 0px;
  width: 100%;

    }

Answer 1

Начните здесь: в вашем коде есть синтаксическая ошибка. display: flex на контейнере не распознается из-за присутствия невидимого символа. Ни одно из свойств flex не работает.

Итак, сначала исправьте это. Просто полностью удалите строку и перепишите display: flex. Вы заметите серьезные изменения в вашем макете.

Во-вторых, ваш flex-direction установлен на column на ваших этикетках / контейнерах ввода. Это укладывает ваши элементы формы по вертикали.

#fname, #email-a, #phone, #dropdown, #mrole, #age, #textbox {
    display: flex;
    flex-flow: column wrap;
    width: 100%;
    margin-left: 40px;
}

Если вы хотите, чтобы текст и ввод располагались в одну строку, используйте flex-direction: row.

Наконец, что касается кнопки отправки, ваш контейнер имеет отступы влево и вправо, что препятствует достижению кнопки краев.

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Как только вы удалите правила заполнения, кнопка будет расширяться от края до края.