CSS correct sub-div's alignment in div

Question

I have the next issue with my CSS styling:

http://s8.postimg.org/p26jl39fp/Screenshot_571.png

I want to align the inputs (which each input placed in own div) in the middle of my form.

The HTML markup for the form:

http://ideone.com/lWYswC (just posted the form content without doctype etc, because webpage doesn't have other divs and this code block is the only in body of my html document).

CSS styling for it:

http://ideone.com/w97FzB

html & body are defined by default with the width/height = 100%

html, body
{
    width: 100%;
    height: 100%;
    ...

The screenshot from the devtools of Chrome browser:

http://s8.postimg.org/azq6a53t1/Screenshot_572.png

As you see, the inputs have crossed the div size, I don't know why.

Also I'm using bootstrap library for the UI, it's also included in project. But as I viewed the source of bootstrap, they didn't use any alignment properties for their controls. They just have some CSS-styling for border radius and blue highlighting.

How can I fix this issue?

Thanks

Answer 1

Really simple:

input { margin: 0 auto; display: block; }