my registration form css is breaking after rending validation message on page -

this form before submission : enter image description here

this form after submission: enter image description here

this css have written each field :

.form-group {     margin: 2% 0% 0% 0%;     padding: 1% 1% 0% 0%; }

this css error message :

.error {     color: #ff0000;     font-size: 0.9em;     text-transform: capitalize; }

see, after rendering validation message css breaking , form height getting expanded. how manage in minimal space form ?

the easy (not recommended) way be:

.error {     color: #ff0000;     font-size: 0.8em;     line-height: 0.8em;     text-transform: capitalize; }

see if components still fall out of image, if does, decrease line-height. recommend set other color, red hard read or put background on it.

And