css - HTML:不需要的空格

Question

我正在尝试通过/通过创建作品集自学 html 和 css。问题是当我在标题内为我的 Logo 和导航菜单创建一个容器并通过放大到最大来调整浏览器大小时。它会在 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

在您的容器中，设置width:100%而不是1040px。

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

它有效。这是您更新的 fiddle : http://jsfiddle.net/nt3HA/1/