Excess space on the right - iphone

Question

* {
margin: 0;
border: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: none;
}
body {
background: #474747 url(bg.png);
}
h1 a {
display: block;
text-decoration: none;
font: 40px Helvetica, Arial, Sans-Serif;
letter-spacing: -5px;
text-align: center;
color: #a0a0a0;
text-shadow: 0px 5px 8px #2a2a2a;
}
h2 {
font: 30px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #222;
text-shadow: 0px 2px 3px #555;
}
div#mobile pre {
width: 275px;
margin: 0 auto;
background: #222;
padding: 10px;
font-size: 20px;
color: #555;
text-shadow: 0px 2px 3px #171717;
-webkit-box-shadow: 0px 2px 3px #555;
-webkit-border-radius: 20px;
}
This is what I have so far on an iPhone-optimized version of my site. But when viewed from an iPhone/iPod touch, it looks well, except that there is excess space on the right. How can I fix this?

Answer 1

I think you have some tabs or spaces after your "labels". You should also have the text in label-elements.
What you might have:
<pre> <form method="post" action="/index.php">Enter a URL<br />(WITH THE http://): <br /><input type="text" name="url">
<br />Want a custom tag? <br /><input type="text" name="custom">
</form>
No URL was entered.</pre>
What you should have:
<form method="post" action="/index.php">
<label for="url">
Enter a URL (WITH THE http://):
</label>
<input type="text" name="url">
<label for="custom">
Want a custom tag?
</label>
<input type="text" name="custom">
</form>
<p>No URL was entered.</p>
Then you need to style it to make it look like before. Remember the pre-element is usually used to output code.