html - Ensure Dynamic inputs fill 50% of browser width -

this time i've got problem input boxes. if add 3 of them, they're taking 50% of browser window in width. when add more, stretching on sides. want them fit in 50% of browser window no matter how many of them here. solutions?

page1 (normal)

* {    box-sizing: border-box;  }  h1 {    font-family: verdana, tahoma, sans-serif;    font-size: 150px;    font-style: normal;    font-weight: 400;    line-height: 170px;    letter-spacing: -8px;    border: 10px solid #66004c;  }  input {    margin: auto;    padding: 25px;    font: normal 15px verdana, tahoma, sans-serif;    width: 100%;    border-left: solid 5px #66004c;    border-right: 0;    border-top: 0;    border-bottom: solid 3px #66004c;    background: #cdcdcd;    -webkit-transition: 0.2s linear;    -moz-transition: 0.2s linear;    -ms-transition: 0.2s linear;    -o-transition: 0.2s linear;    transition: 0.2s linear;  }  input:hover,  input:focus {    -webkit-background: #c299b7;    -moz-background: #c299b7;    background: #c299b7;  }

<div style="float: left; position: relative; left: 50%;">    <div style="float: left; position: relative; left: -50%;">      <h1 align="center">log in</h1>      <form action="" method="post">        <input type="text" name="username" placeholder="username">        <input type="password" name="password" placeholder="password">        <input type="submit" value="log in" style="background: #66004c; color: #efefef;">        <br>      </form>      <form action="http://www.reflinks.cba.pl/register.php">        <!--oooooooooooooooooooooooo--------important change--------->        <input type="submit" value="don't have account yet? register!" style="border-bottom: solid 5px #66004c;">      </form>    </div>  </div>

page2 (extra wide)

* {    box-sizing: border-box;  }  h1 {    font-family: verdana, tahoma, sans-serif;    font-size: 150px;    font-style: normal;    font-weight: 400;    line-height: 170px;    letter-spacing: -8px;    border: 10px solid #66004c;  }  input {    margin: auto;    padding: 25px;    font: normal 15px verdana, tahoma, sans-serif;    width: 100%;    border-left: solid 5px #66004c;    border-right: 0;    border-top: 0;    border-bottom: solid 3px #66004c;    background: #cdcdcd;    -webkit-transition: 0.2s linear;    -moz-transition: 0.2s linear;    -ms-transition: 0.2s linear;    -o-transition: 0.2s linear;    transition: 0.2s linear;  }  input:hover,  input:focus {    -webkit-background: #c299b7;    -moz-background: #c299b7;    background: #c299b7;  }

<div style="float: left; position: relative; left: 50%;">    <div style="float: left; position: relative; left: -50%;">      <h1 align="center">register</h1>      <form action="" method="post">        <input type="text" name="username" placeholder="username">        <input type="password" name="reg_password" placeholder="password">        <input type="password" name="reg_password_repeat" placeholder="repeat password">        <input type="email" name="email" placeholder="your email">        <input type="submit" value="register" style="background: #66004c; color: #efefef;">        <br>      </form>      <form action="http://www.reflinks.cba.pl/index.php">        <input type="submit" value="already have account? log in!" style="border-bottom: solid 5px #66004c;">      </form>    </div>  </div>

perhaps may work you:

* {  	box-sizing: border-box;  }  h1 {  	font-family: verdana, tahoma, sans-serif;  	font-size: 150px;  	font-style: normal;  	font-weight: 400;  	line-height: 170px;  	letter-spacing: -8px;  	border: 10px solid #66004c;  }  input {  	margin: auto;  	padding: 25px;  	font: normal 15px verdana, tahoma, sans-serif;  	width: 100%;  	border-left: solid 5px #66004c;  	border-right: 0;  	border-top: 0;  	border-bottom: solid 3px #66004c;  	background: #cdcdcd;  	-webkit-transition: 0.2s linear;  	-moz-transition: 0.2s linear;  	-ms-transition: 0.2s linear;  	-o-transition: 0.2s linear;  	transition: 0.2s linear;  }  input:hover, input:focus {  	-webkit-background: #c299b7;  	-moz-background: #c299b7;  	background: #c299b7;  }

<div style="width: 50%; margin: 0 auto;">  	<h1 align="center">log in</h1>  	<form action="" method="post">  		<input type="text" name="username" placeholder="username">  		<input type="password" name="password" placeholder="password">  		<input type="submit" value="log in" style="background: #66004c; color: #efefef;">  		<br>  	</form>  	<form action="http://www.reflinks.cba.pl/register.php">  		<!--oooooooooooooooooooooooo--------important change--------->  		<input type="submit" value="don't have account yet? register!" style="border-bottom: solid 5px #66004c;">  	</form>  </div>