centering a video and a input box using flexbox

25
December 30, 2018, at 9:20 PM

I have a bit of a problem horizontally centering my video, input box and button in the center of the page. I've seen a few answers that say that I don't need flexbox and I've actually attempted to set my margin to auto(to center the content in the middle of the viewport) to no avail. When I tried to inspect the code using chrome developer tools, It showed that my video, content, and form divs are taking up 100% of the width of the viewport, so it seems like that's the reason why I can't center it. Of course, I could be wrong. I'm stumped. Any help you guys give will be insanely useful right now. If this isn't clear let me know. This is what I have so far. Thanks, Anna

<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

Okay, so this is what I did. I made it so that the 'content div' encompasses the video, input box, button and footer, and text-aligned them all to 'center' . Here's an example of my code below:

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;
}
READ ALSO
Spring Rest/Security : body in response is missing then status is 4** [on hold]

Spring Rest/Security : body in response is missing then status is 4** [on hold]

EDITED(SOLVED) : i was using chrome debugger to look network responses, but it was not showing http responsei was writed some tests and now i can see response is correctly returning

40
Exception in SOAP Web Service Parser already consumed

Exception in SOAP Web Service Parser already consumed

while executing soap web servicei got exception in org

62
Websocket is not working with WSS in Apache

Websocket is not working with WSS in Apache

Let me explain you the whole scenario in detail:

32
Sum of MYSQL Query

Sum of MYSQL Query

I have a MySQL DB

41