inner
out
注：
out包含inenr;
out 的width=80%
inner 的width=100%
如果设置out的 margin:0 auto，在电脑上看是这样的
手机上看是这样的
原因是：我设置了inner的padding，导致inner的总宽度比out要长。
但我必须要设置inner的padding，要想要inner显示居中。
这种情况怎么办呢？
刚才看到一位朋友没明白我的意思，是我没表达清楚。
我把inner放在out里面是因为我想加那个 搜索图标，利用父元素进行绝对定位。
还有，我一开始用background里面加搜索图标，就不需要父元素。但是那样不清晰，所以我改用字体了，所以貌似需要加上父元素进行定位。
update 2014-11-10
光棍节前把这个坑填上 = =||
大概看懂了，按照我自己的理解贴上代码，不一定符合你的要求：
<div class="outer">
<i class="ico"></i>
<input type="text">
</div>
.outer{
box-sizing:border-box;
width:960px;
padding-left:50px;
padding-right:20px;
margin:0 auto;
}
.inner{
margin-left:50px;
margin-right:30px;
}
@media screen and (max-width:960px){
.outer{
width:auto;
margin-left:15px;
margin-right:15px;
}
}
inner不设置padding而是通过margin:0 auto进行居中；
或者通过box-sizing:border-box改变盒模型。
你的问题我看不太懂，上述我没有验证过，希望对你有启发。
inner 的 padding 是大忌，实际上任何情况下 padding 能不用则不用，有很大的可能会使元素增加规定好的长度，引发各种越界问题。
你这个需求也很好解决：
CSS：
.outer {
width: 100%;
}
.inner {
width: 80%;
padding: 0;
margin: 0 auto;
/*
或者使用
margin-left: 9%;
精确控制视觉效果，毕竟有放大镜这样的元素，不是完全对称。
*/
}
我的建议是不要给.inner设置宽度，因为块级元素的宽度会自动充满的。至于padding，需要用的时候，还是要用滴。
呵呵，LZ 好眼熟，是不是还没用上我上次推荐的 Framework7？
关于这个问题，我来给你演示下 F7 是如何解决的吧。
一、首先是这个布局的问题：
将 padding 加入对元素宽度的计算：
-webkit-box-sizing: border-box;
box-sizing: border-box;
另外关于居中什么的，定位什么的，移动端可考虑更灵活的布局方式：flex 布局，这个网上很多，自己搜索下吧。
二：图标改变为字体，是不错的进步：
但 icon font 不是最优选择，如果更有追求的话，推荐你看看这边文章：Web 设计新趋势: 使用 SVG 代替 Web Icon Font
最后，没有给你解决细节上的具体问题，但希望在大方向上能给你一点启发。