Labels and edit boxes in custom fluid page alignment gets messed up when zooming in/out

I have created a custom fluid page where i had to put labels and text boxes as header, which i aligned via CSS placed in their respective object properties. It was kind of a trial and error getting them aligned via group boxes and psc_display inline stylesheets. Problem is

when i zoom in/out of the page, the fields get all over the place. Is there a way where the alignment of labels and edit boxes in a fluid page be fixed and will not move/misalign upon zooming in/out of the page? See attached for the illustration