HTML:不需要的空格

Question

我正在尝试通过创建投资组合来自学html和css。问题是当我在标题内为我的徽标和导航菜单创建一个容器并通过放大最大值来调整浏览器大小时。它会在 html 的右侧创建不需要的空格。避免这些类型问题的最佳方法是什么？

http://jsfiddle.net/nt3HA/http://jsfiddle.net/nt3HA/embedde

.HTML

<div id="wrapper">
<div id="wrapper">
<div id="header">
<div id="innernav"> 
<div id="container"> 
<img src="images/ARlogo2.png" alt="ARlogo" id="logo"> 
</div>
</div>
</div><!-- #header -->
</div><!-- #wrapper -->

.css

    html,
body{
            margin:0;
        padding:0;
        height:100%;
        background-color:#f1f1f1;
}
    #wrapper{
        min-height:100%;
        position:relative;
}
    #header{
        background: #242424;
}
    #innernav{ 
        padding: 20px 0;
}
    #container{
        margin: 0 auto;
            padding: 0;
        position: relative;
        width: 1040px;;
}
    #logo{
        position: relative;
}
    #content{
        padding-bottom:100px; /* Height of the footer element */
}
    #footer{
       background:#222222;
       width:100%;
       height:100px;
       position:absolute;
       bottom:0;
       left:0;
}

Answer 1

在你的container中，设置width:100%而不是1040px。

#container
{
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 100%;
}

它有效。这是您更新的小提琴：http://jsfiddle.net/nt3HA/1/

Answer 2

在修改线上，给出容器宽度：auto 会去掉多余的右边空间！

 #container{width:auto;}

JSFiddle