Form input grows. Help!

So I've got this website I'm working on. I have a mouse that has a wheel on it and when i scroll it it makes the screen get bigger. It's nice for when you have the pc on tv. But my webpage doesnt adjust right. Can you help? Here's the html :


<FORM METHOD="LINK">
<INPUT value = "Login" type = "submit" class = "button1">
</FORM>

<FORM METHOD="LINK" ACTION="LOGINSCREEN2.HTML">
<INPUT value = "Create an account" type = "submit" class = "button2">
</FORM>

and here's the css :

.button1 {
BACKGROUND : #A00000;
COLOR : WHITE;
WIDTH : 20%;
MARGIN-LEFT : 40%;
MARGIN-TOP : 1%;
}

.button2 {
BACKGROUND : #A00000;
COLOR : WHITE;
WIDTH : 20%;
MARGIN-LEFT : 40%;
MARGIN-TOP : 1%;
ONLICK = "LOGINSCREEN2.HTML";

What happens when the wheel scrolls is the everything grows proportionately except the text box. The text box starts taking off to the left and looks bad. I need the text box to not grow like that.