html - Text goes goes into separate lines when using a percentage padding -

i have small problem in html forms. when give following css,

.row .section-1 label {/* formatting section-1 labels */       padding: 0 5px 0 10px;       margin: 3px 0 0 0;       display:block;

}

this output :

enter image description here

however when edit css put padding in form of percentage:

.row .section-1 label {/* formatting section-1 labels */       padding: 0 40% 0 80%;       margin: 3px 0 0 0;       display: block; }

this output : enter image description here

i want use percentages, want in first image. ideas??

thanks

you're padding on left of label element:

.row .section-1 label {/* formatting section-1 labels */       padding: 0 40% 0 80%;       margin: 3px 0 0 0;       display: block; }

the definition of css padding in percentage follows:

defines padding in % of containing element

so it's adding 80% of label elements width padding. in original fixed padding example you're setting 10px padding on left.

Assebmley