portfolio区的做完之后，Stats区的内容重叠在portfolio上了，怎么解决

* { font-family: Arial; font-size: 14px; margin: 0; padding: 0; border: none; }
header,
nav,
section,
footer { display: block; } 
a { text-decoration: none; }
ul { list-style: none; }

header {
	height: 80px;
	background: #2e2e2e;
}

header > .container {
	width: 1200px;
	margin: 0 auto;
}

header > .container > a {
	display: block;
	float: left;
	margin: 20px 25px;
}

header > .container > nav {
	float: right;
}

header > .container > nav > a {
	font-size: 14px;
	float: left;
	color: #fff;
	line-height: 73px;
	width: 110px; 
	height: 80px; 
	display: block;  
	text-align: center; 
}
header>.container>nav>a:hover,
header>.container>nav>a.active { 
	color: #000;
	background: #d40112;
}

.banner {
    position: relative;
}

.banner img {
	width: 100%;
	height: 600px;
}

.banner > p {
    width: 900px;
    height: 80px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 20px;
    position: absolute;
    top: 50%;
    margin-top: -40px;
    left: 45%;
    margin-left: -350px;
}

.banner > p > samp {
	font-size: 70px;
}

.portfolio {
	position: relative;
	height: 473px;
	width: 100%;
	margin: 100px auto 0;
}

.portfolio > dl > dt {
	font-size: 48px;
    text-align: center;
	color: #f46208;
	margin: 20px 0px 100px 0;
}

.portfolio > dl > dd {
	margin: 20px 0px 100px 0px;
	font-size: 14px;
    text-align: center;
}

.portfolio > nav {
    width: 729px;
    margin: 20px auto 0;
}

.portfolio > nav > a {
	margin: 20px 5px 20px 5px;
}

.portfolio > nav > a.ALL{
	height: 50px;
	font-size: 26px;
	color: #f46208;
	line-height: 50px;
    text-align: center;
	width: 100px;
	border: 1px solid #f46208;
    display: inline-block;
} 

.portfolio > nav > a.WEB{
	height: 50px;
	font-size: 26px;
	color: #f46208;
	line-height: 50px;
    text-align: center;
	width: 100px;
	display: block;
	border: 1px solid #f46208;
	display: inline-block;
} 

.portfolio > nav > a.SOFTWARE{
	height: 50px;
	font-size: 26px;
	color: #f46208;
	line-height: 50px;
    text-align: center;
	width: 180px;
	border: 1px solid #f46208;
    display: inline-block;
}

.portfolio > nav > a.WORKS{
	height: 50px;
	font-size: 26px;
	color: #f46208;
	line-height: 50px;
    text-align: center;
	width: 120px;
	border: 1px solid #f46208;
    display: inline-block;
}

.portfolio > nav > a.BRANDS{
	height: 50px;
	font-size: 26px;
	color: #f46208;
	line-height: 50px;
    text-align: center;
	width: 150px;
	border: 1px solid #f46208;
    display: inline-block;
}

.portfolio img {
	margin: 20px;
	width: 100%;
}

.stats {
	
}

.team {
	background: #2e2e2e;
}

footer {
	background: #2e2e2e;

}

OCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>introduction</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <header>
        <div class="container">
            <a href="index.html"><img src="img/logo.jpg"></a>
            <nav>
                <a href="index.html" class="Home">HOME</a>
                <a href="#" class="portfolio1">PORTFOLIO</a>
                <a href="#" class="team">TEAM</a>
                <a href="#" class="contact">CONTACT US</a>
            </nav>
        </div>
    </header>
    <section class="banner">
        <img src="img/banner.jpg">
        <p>
         <samp>Welcome &nbsp;&nbsp;&nbsp; to &nbsp;&nbsp;&nbsp; Website</samp><br>
         Lorem ipsum dolor sit amet,consectetur adipisicing elit
        </p>
    </section>
    <section class="portfolio">
        <dl>
            <dt>
                P&nbsp;o&nbsp;r&nbsp;t&nbsp;f&nbsp;o&nbsp;l&nbsp;i&nbsp;o
            </dt>
            <dd>
                Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmodtempor incididunt ut labore et<br>dolore magna aliqua.Ut enim ad minim veniam
            </dd>

        </dl>
                <nav>
                    <a href="#" class="ALL">ALL</a>
                    <a href="#" class="WEB">WEB</a>
                    <a href="#" class="SOFTWARE">SOFTWARE</a>
                    <a href="#" class="WORKS">WORKS</a>
                    <a href="#" class="BRANDS">BRANDS</a>
                </nav>
                <img src="img/portfolio-nav-img.jpg">
    </section>
    <section class="stats">
        <dl>
            <dt>
                Stats
            </dt>
            <dd>
                Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam
            </dd>
            <dd>
                <img src="img/stats1.jpg">Margins 12,000
                <img src="img/stats2.jpg">Completed 5,681
                <img src="img/stats3.jpg">Projects 432
                <img src="img/stats4.jpg">Customers 86
            </dd>
        </dl>
    </section>

古尔丹丶 2017-09-05

源自：HTML5展望 3-2 作业题