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: 
```css
input {
  display: block;
  width: 300px;
  margin: auto;
}
```

```html
<div>
  <input type="text">
  <input type="text">
</div>
```
All you need to do is set a width to the parent, here it is `div` and then make the `width` of the `input` as `100%` as in the following solution. Use `margin: 0 auto;` instead of `text-align: center;` and you will achieve what you want to.

```css
.parent-div {
  margin: 0 auto;
  width: 30%;
}

.parent-div input{
  width: 100%;
}
```

```html
<div class="parent-div">
  <input type="text">
  <br>
  <input type="text">
</div>
```

Thanks.