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>
```
The main reason for the miss alignment is the white space between both inputs and more precisely between the first input and the `br`. If your remove it will be fine:

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

Here is another example to clearly show the whitespace issue:

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

We added another `br` at the end which make us having white space after the first input AND the second input unlike perviously where the white space is only after the first one.

Adding border will show us those white spaces:

```html
<div style="text-align:center;display:inline-block;border:1px solid;">
  <input type="text">
  <br>
  <input type="text">
  <br>
</div>
<div style="text-align:center;display:inline-block;border:1px solid;">
  <input type="text">
  <br>
  <input type="text">
</div>
```