为啥我这个页脚区的横线在页面上方

这个横线按视频里说的，应该是页脚区footer这个div的上边框吧

footer的div没有包含页数的div啊，为啥会在上面呢

html:
/*之前的代码省略*/
		<div class="page-nav">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">上一页</a></li>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#">...</a></li>
				<li><a href="#">99</a></li>
				<li><a href="#">100</a></li>
				<li><a href="#">下一页</a></li>
				<li><a href="#">末页</a></li>
			</ul>
		</div>
	</div>
	<div class="footer">
		<p><span>页脚头</span>----页脚尾巴</p>
	</div>
</body>

css:
​/*页面标签*/
.content .page-nav{
	width: 100%;
	height: 60px;
	line-height: 60px;
}

/*让标签再page-nav div块中居中显示*/
.content .page-nav ul{
	width: 500px;
	margin:auto;
	overflow: hidden;
}


/*页数标签*/
.content .page-nav ul li{
	float: left;
	list-style: none;
	margin-left: 10px;
}

/*页脚区*/
.footer{
	width: 1200px;
	height: 100px;
	margin:60px auto;
	border-top:1px solid #FFE4E1;
	/*预防浮动溢出，溢出时隐藏溢出部分*/
	margin-top: 20px;
}

/*页脚文字段落*/
.footer p{
	text-align: center;
	line-height: 80px;

}