how to remove small space that only appear in iphone browser - iphone

Question

I am using percentage to define the width of all elements. I am also hiding (display: none;) some elements only for handheld, including iphone.
html structure:
<header>
<!-- ... -->
</header>
<nav>
<!-- ... -->
</nav>
<div id="search">
<!-- ... -->
</div>
CSS:
* {
margin: 0;
padding: 0;
}
/* ... */
header {
width: 100%;
height: 80px;
/* ... */
}
/* ... */
nav {
float: left;
width: 76%;
height: 20px;
padding: 5px 2%;
}
#search {
float: right;
width: 16%;
height: 20px;
padding: 5px 2%;
}
#media only screen and (max-device-width: 480px), handheld {
/* ... */
header {
height: 50px;
}
nav {
width: 96%; /*plus padding 2% each = 100%*/
}
#search {
display: none;
}
}
So, I am hiding the search and increasing the nav to fill the space (100%). However, there is a small white space on the right side.
screen view:
iphone view:
Does anyone know how to remove the small white space in the iphone view?
The full code: http://jsfiddle.net/AWGk2/

Answer 1

Remove the padding from your NAV and SEARCH elements.
Make the width of your NAV element 80% and the width of your SEARCH element 20%.
Add a new DIV element inside your NAV and SEARCH elements and apply your padding to those elements. Don't bother specifying a width on these new inner elements.
In your media query section make the NAV width 100%.
I'd also consider adding to your viewport rule.
Here's the one I use myself:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">