Question: I'm trying to center two text boxes with text-align. However, they didn't align center as you can see in this image. <https://gyazo.com/c47f4037ba1ab3abef5833358d94172e>
What caused the problem? What is the solution?

Here is my code:

```html
<div style="text-align:center;">
  <input type="text">
  <br>
  <input type="text">
</div>
```

Answer: 
I would recommend using a [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).

```css
div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
```

```html
<div>
  <input type="text">
  <input type="text">
</div>
```
```css
input {
  display: block;
  width: 300px;
  margin: auto;
}
```

```html
<div>
  <input type="text">
  <input type="text">
</div>
```