html - 当浏览器处于半屏状态时，HTML/CSS header 在右侧折叠

我学习HTML / CSS已有大约两个星期了。

我一直在制作虚拟网站只是为了练习，最近我一直在为标题问题苦苦挣扎。我将发布代码/图片以帮助我尽可能具体。

我正在尝试在网页顶部放置一个纯色背景色的标题，然后在标题左侧添加一个logo（title），在右侧添加一个导航/搜索栏， 1020px的容器。

全屏看起来一切正常，但是当我将浏览器宽度调整为一半时，导航/搜索栏似乎不在右侧，并且在标题上方滚动时，背景色也丢失了。

我不确定为什么要这样做，所以如果有人进行了修复，您不仅可以向我解释为什么要这样做，还可以向我解释为什么/为什么需要做我需要做的事情来修复它。非常感谢！

我的HTML档案

<html>

    <head>
        <title>Dummy Site</title>
        <link rel="stylesheet" type="text/css" href="stylez.css">
    </head>

    <body>


        <header>

            <div class="container">
                <div id="logo">
                    <h1>Another Dummy Site</h1>
                    <em>Just another dummy web page</em>
                </div>

                <div id="nav">
                    <nav>
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </nav>

                    <form>
                        <input type="search" placeholder="search 4 somethin">
                    </form>
                </div>

            </div>

            <div class="clearfix"></div>

        </header>

    </body>

</html>

CSS：

*{
margin: 9;
padding: 9;
}
body {
font-family: monospace, sans-serif;
width: 109%;
background: #ccc;
}

header{
background: #fc9;
}

.container{
width: 1020px;
margin: 9 auto;
}

#logo{
float: left;
}

#nav{
float: right;
}
.clearfix::after{
content:"";
clear: both;
display: table;
}

这是全屏显示的网站图片

html - 当浏览器处于半屏状态时，HTML/CSS header 在右侧折叠-LMLPHP

这是浏览器半屏上的图片-注意滚动条，并在右侧切断。

这是我向右滚动时的图片

最佳答案

尝试这个

.container {
   max-width:1020px;
   width:100%;
   margin:0 auto;
 }

jsfiddle