HTML/CSS: Styling a checkbox inside a form -

i have following form:

using html:

<form id="user_form" name="user_form">     <input id="firstname" type="text" name="firstname" placeholder="vorname" required>     <br>     <input id="lastname" type="text" name="lastname" placeholder="nachname" required>     <br>     <input id="nickname" type="text" name="nickname" placeholder="nickname" required>     <br>     <input id="email" type="email" name="email" placeholder="email" required>     <br>     <input id="conditions" type="checkbox" name="conditions" required>ich bin mit den <a id="show_2">teilnahmebedingungen</a> einverstanden!     <br>     <input id="user_save" type="submit" value="speichern"> </form> 

and css:

#user_form input[type="text"], input[type="email"], input[type="submit"] {     width: 80%;     display: block;     margin: 0 auto;     height: 50px !important;     font-size: 18px;     line-height: normal;     line-height: 32px\0/;     /* ie 8 */ }  #user_form input[type="checkbox"] {     width: 80%;     display: inline !important;     margin: 0 !important;     padding: 0 !important;     height: 50px !important; } 

what dont understand is:

1. why isnt checkbox aligned left. there should not padding left of checkbox. set margin , padding 0.
2. why there space between checkbox , text right of textbos? text needs directly right of checkbox maybe 20px padding. need text centered vertically
3. why text not linebreaking? checkbox text should have width of 80% other inputs.

hope can me.

https://jsfiddle.net/p04prk6p/ here need. layer div around it

#user_form input[type="text"], input[type="email"], input[type="submit"] {     width: 80%;     display: block;     margin: 0 auto;     height: 50px !important;     font-size: 18px;     line-height: normal;     line-height: 32px\0/;     /* ie 8 */ }  #user_form input[type="checkbox"] {     display: inline !important;     margin: 0 !important;     padding: 0 !important;     height: 50px !important;     float: left; }  #checkbox_div {     width: 80%;     margin: 0 auto;     line-height: 50px; }   <form id="user_form" name="user_form">     <input id="firstname" type="text" name="firstname" placeholder="vorname" required>     <br>     <input id="lastname" type="text" name="lastname" placeholder="nachname" required>     <br>     <input id="nickname" type="text" name="nickname" placeholder="nickname" required>     <br>     <input id="email" type="email" name="email" placeholder="email" required>     <br>         <div id="checkbox_div"><input id="conditions" type="checkbox" name="conditions" required>ich bin mit den <a id="show_2">teilnahmebedingungen</a> einverstanden!</div>     <br>         <div style="clear: both"></div>     <input id="user_save" type="submit" value="speichern"> </form>