テキストボックスの大きさが固定されいるのでCSSで変更できない

前提・実現したいこと

画像の中に配置されているテキストボックスの大きさを「スマホ画面の〇％」のように変更を行いたい。
なお、CSSはサンプルを改造したものです。

お手数をおかけしますが、もしご存じでしたら回答を頂きたく存じます。

発生している問題・エラーメッセージ

CSSでwidthを指定しても位置が変わるだけでテキストボックスの大きさが変更されません。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>タイトル</title>
6<link rel="stylesheet" type="text/css" href="style.css" media="screen">
7</head>
8<body>
9<div class="top_img">
10<img src="img/index.png" >
11
12	<div class="absolute">
13		<img src="img/box.png" >
14	</div>
15
16	<form method="post">
17		<div class="texstbox">
18			<input id="view_name" type="text" name="view_name" value="">
19		</div>
20		<div class="texst_inpt">
21			<input type="submit" name="btn_submit" value="書き込む">
22		</div>
23	</form>
24</div>
25</body>
26</html>

CSS
1@charset "utf-8";
2/* CSS Document */
3
4/*----------------------
5	デフォルトスタイル
6-----------------------*/
7body,p,h1,h2,h3,h4,h5,h6,
8span,small,strong,
9div,ul,li,
10figure,img,
11header,footer,nav,section{
12    margin:0;
13    padding:0;
14	border:none;
15	outline:none;
16	font-size:1rem;
17}
18
19header,footer,nav,section{display:block;}
20
21html{
22	font:13px/1.3 "ヒラギノ角ゴ Pro W3";
23	-webkit-text-size-adjust:none;}
24
25li{list-style:none;}
26
27
28
29/*----------------------------------------
30	全ページ共有ここから
31----------------------------------------*/
32body{
33	background:url(img/bg.jpg) #000;
34	color:#5D5D5D;
35}
36
37/* リンク色変更はここ */
38a{
39	color:#FFA49B;
40	text-decoration:none;
41}
42
43/*【角丸】
44 　角丸にしたいコンテンツに
45 　クラスで指定してください。
46*/
47.corner{
48	-moz-border-radius:5px;
49	-webkit-border-radius:5px;
50	border-radius:5px;
51}
52
53.corner img{
54	background:#FFF;
55	padding:1px;
56	-moz-border-radius:5px;
57	-webkit-border-radius:5px;
58	border-radius:5px;
59}
60
61/*----------------------------------------
62	本編ここから
63----------------------------------------*/
64.top_img{
65	position: relative;
66	margin-left: auto;
67    margin-right: auto;
68	padding:10px 0;
69	overflow:hidden;
70	border-top:solid 1px #202020;
71	border-bottom:solid 1px #000;
72	text-align:center
73}
74
75.top_img img{
76	width: 100%;
77	height:auto;
78	border:solid 1px #333333;
79}
80
81.absolute {
82    position: absolute;
83    width: 100%;
84    bottom: 0px;
85}
86
87.texstbox {
88    position: absolute;
89    left: 5%;
90    bottom: 25%;
91    width: 50%;
92}
93
94.texst_inpt {
95    position: absolute;
96    right: 30px;
97    bottom: 150px;
98}
99
100}