关于#html5#的问题，请各位专家解答！

我做的网页为什么会缩成一团，希望达到的效果不算这样的，是哪里出错了吗

#adver{
max-width: 6.4rem;
margin: 0 auto;
}
img{
display: block;
max-width: 100%;
}
.container{
max-width: 6.40rem;
margin: 0 auto;
}
.container figure{
width: 25%;
float: left;
font-size: .16rem;
text-align: center;
margin: 0 0 0.1rem 0;
}
.container figure img{
margin: 0 auto;
padding: 0.1rem 0 0 0;
}
.container figcaption{
color: #c36;
font-size: .16rem;
padding: 0.2rem .05rem;
}
.container h4{
text-align: center;
}
.clear{
clear: both;
height: 0;
display: block;
content: ".";
visibility: hidden;
}
.content{
max-width: 6.40rem;
margin: 0 auto;
}
.new_list li{
border-bottom: 1px solid #eee;
height: 60px;
padding: 10px;
}
.new_list li img{
width: 20%;
height: 55px;
float: right;
}
.new_list li p{
float: left;
width: 80%;
}
.new_list li p span{
background: #0156e9;
color: #fff;
padding: 1px 5px;
font-size: 0.16rem;
margin-right: 5px;
}
.new_list li p font{
font-size: 0.16rem;
color: #999;
}
@media (min-width:480px) and (max-width:640px){
.container h4{
font-size: 0.14rem;
}
.new_list p{
font-size: 0.14rem;
}
header{
font-size: 0.14rem;
}
.new_list li p font{
font-size: 0.12rem;
}
}

@media (max-width:480px) {
.container h4 {
font-size: 0.12rem;
}
.new_list p,.new_list span{
font-size: 0.12rem;
}
header{
font-size: 0.12rem;
}
.new_list li p font{
font-size: 0.10rem;
}
}

========================================================
@charset "utf-8"
html {
font-size: 625%;
}

body {
max-width: 6.40rem;
margin: 0 auto;
font-size: 0.16rem;
}

{
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
}

ul {
list-style: outside none none;
}

header {
max-width: 6.40rem;
margin: 0 auto;
height: .45rem;
line-height: .45rem;
font-size: 0.16rem;
}

header #nav {
height: .45rem;
line-height: .45rem;
background-color: #06C;
}

header #nav li {
width: 25%;
text-align: center;
float: left;
display: inline-block;
}

header #nav a {
color: #FFF;
width: 100%;
height: .45rem;
display: block;
}

header #nav a:hover, header a:visited {
background-color: #FFF;
color: #06c;
font-weight: bold;
}

.none {
display: none;
}

.clear {
clear: both;
height: 0;
display: block;
content: ".";
visibility: hidden;
}

/* 复选框用于切换菜单的开合状态 /
nav input[type="checkbox"], .menu nav{
position: absolute;/ 相对于父元素绝对定位 /
left: 2%;
top:10px;
display: none;/ 隐藏不显示 */
}

@media (max-width: 640px) {
.menu{
display: block;
cursor: pointer;
}

.menu img{
    width: 100%;
}

nav > ul{
    display: none;
}

nav input[type="checkbox"]:checked ~ ul{
    display: block;
}

nav ul li{
    min-width: 100%;
    display: block;
    text-align: center;
    margin: 0;
    padding: 0;
    background: #06C;
}

nav ul li a{
    color: #fff;
    display: block;
    margin: 10px 0;
}

}

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title>无标题</title>
    <link rel="stylesheet" href="header.css" type="text/css"/>
    <link rel="stylesheet" href="index.css" type="text/css"/>
</head>

<body>
    <header>
        <nav id="nav">
            <input type="checkbox" id="togglebox"/>
            <ul>
                <li><a href="#">推荐</a></li>
                <li><a href="#">快讯</a></li>
                <li><a href="#">视频</a></li>
                <li><a href="#">服务</a></li>
            </ul>
            <!-- 汉堡菜单按钮 -->
            <label class="menu" for="togglebox"><img src="../图片素材/menu.png"/></label>
        </nav>
    </header>
    
    <div class="clear"></div>
    
    <div id="adver"> <img src="../图片素材/青年.png" width="100%"/> </div>
    <div class="container">
        <figure> <img src="../图片素材/ico_09.png"/>
            <figcaption>
                <h4>我要找楼</h4>
            </figcaption>
        </figure>
        
        <figure> <img src="../图片素材/ico_10.png"/>
            <figcaption>
                <h4>违规查询</h4>
            </figcaption>
        </figure>
        
        <figure> <img src="../图片素材/ico_12.png"/>
            <figcaption>
                <h4>政府预约</h4>
            </figcaption>
        </figure>
        
        <figure> <img src="../图片素材/ico_11.png"/>
            <figcaption>
                <h4>气费查询</h4>
            </figcaption>
        </figure>
        
        <figure> <img src="../图片素材/ico_10.png"/>
            <figcaption>
                <h4>预约查询</h4>
            </figcaption>
        </figure>
        
        <figure> <img src="../图片素材/ico_03.png"/>
            <figcaption>
                <h4>公交查询</h4>
            </figcaption>
        </figure>
        
        <figure> <img src="../图片素材/ico_11.png"/>
            <figcaption>
                <h4>政务导航</h4>
            </figcaption>
        </figure>
        
        <figure> <img src="../图片素材/ico_08.png"/>
            <figcaption>
                <h4>人社查询</h4>
            </figcaption>
        </figure>
    </div>
    
    <div class="clear"></div>
    
    <div class="content">
        <h3>资讯</h3>
        <ul class="new_list">
            <li><a href="../快讯/cont.html">
            <p><span>原创</span>新装修房子水管破裂 牵出楼上“绝命毒师”邻居，dfdfaddfs <br />
                <font>123评</font></p>
             <img src="../图片素材/img_1xhdpi.png" width="85" height="57"/></a></li>
             
            <li><a href="../快讯/cont.html">
            <p><span>原创</span>新装修房子水管破裂 牵出楼上“绝命毒师”邻居，dfdfaddfs <br />
                <font>123评</font></p>
             <img src="../图片素材/img_1xhdpi.png" width="85" height="57"/></a></li>
            
            <li><a href="../快讯/cont.html">
            <p><span>原创</span>新装修房子水管破裂 牵出楼上“绝命毒师”邻居，dfdfaddfs <br />
                <font>123评</font></p>
             <img src="../图片素材/img_1xhdpi.png" width="85" height="57"/></a></li>
            
            <li><a href="../快讯/cont.html">
            <p><span>原创</span>新装修房子水管破裂 牵出楼上“绝命毒师”邻居，dfdfaddfs <br />
                <font>123评</font></p>
             <img src="../图片素材/img_1xhdpi.png" width="85" height="57"/></a></li>
        </ul>
    </div>
    
</body>

你倒是给元素设置宽度啊，html、body没有宽度，div也继承不了它的宽度，max-width只是限制宽度不超多多少，并不是设置宽度多少