центрирование видео и поля ввода с помощью flexbox

Question

У меня возникла небольшая проблема с горизонтальным центрированием моего видео, поля ввода и кнопки в центре страницы.Я видел несколько ответов, в которых говорилось, что мне не нужен flexbox, и я на самом деле пытался установить поле на авто (для центрирования контента в центре окна просмотра), но безрезультатно.Когда я попытался проверить код с помощью инструментов разработчика Chrome, он показал, что мои видео, контент и div-формы занимают 100% ширины области просмотра, поэтому мне кажется, что по этой причине я не могу отцентрировать его.Конечно, я могу ошибаться.Я в тупике.Любая помощь, которую вы, ребята, окажете, будет безумно полезна прямо сейчас.Если это не ясно, дайте мне знать.Это то, что я до сих пор.Спасибо, Анна

<div class="content">
<div class="video">
<h2>Want to read as fast as me? Follow the instructions below... 
</h2>
<iframe width="560" height="315" 
 src="https://www.youtube.com/embed/7SbJLfqPJgI" frameborder="0" 
 allow="accelerometer; autoplay; encrypted-media; gyroscope; 
 picture-in-picture" allowfullscreen></iframe>
 </div>
 <form>
<input type "text" placeholder="Tell us more about what books you 
like.">
<form>
</div>
<button type="submit" name="button">submit</button>
<footer>Anna Gibson @ 2018</footer>

Answer 1

Хорошо, вот что я и сделал.Я сделал так, чтобы «div содержимого» включал видео, поле ввода, кнопку и нижний колонтитул, и выровнял их по тексту по центру.Вот пример моего кода ниже:

HTML:

  <div class="content">
    <div class="video">
      <h2>Want to read as fast as me? Follow the instructions below...</h2>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/7SbJLfqPJgI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
      <form>
    <input type "text" placeholder="Tell us more about what books you like.">
    <form>
     <button type="submit" name="button">submit</button>

     <footer>Anna Gibson @ 2018</footer>
      </div>

CSS:

.content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

form {
  width: 200px;
  margin: 0 auto;
}


input{
  margin: auto;
  width: 200px;
  height: 150px;
  margin-top: 20px;
  border: 2px solid black;
}

button {
  margin-top: 40px;
  font-size: 18px;
  padding: 10px;
  text-align: center;
  background-color: #7a420a;
  color: white;
  margin: auto;
}