我写的网页宽度出现了问题，还有紫色卡片的部分不知道如何让它居中，求大神指教
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* {
margin:0;
padding:0;
}
nav{
background-color:#999;
height:40px;
}
nav ul{
list-style:none;
}
nav ul li,nav .logo{
height:40px;
line-height:40px;
text-align:center;
float:right;
display:inline-block;
}
nav .logo{
float:left;
font-size:20px;
font-weight:700px;
padding-left:10px;
letter-spacing:1px;
}
nav ul li a,nav .logo a{
text-decoration:none;
margin-right:10px;
display:inline-block;
color:#FFF;
}
.banner{
height:500px;
background-color:#666;
}
.banner .inner{
max-width:250px;
margin:0 auto;
position:relative;
top:160px;
text-align:center;
}
.banner .inner button{
color:#CCC;
border:none;
background-color:#333;
padding:10px 20px;
font-size:16px;
}
.banner .inner p{
margin:30px auto;
line-height:25px;
}
.banner .inner .more{
margin-top:80px;
}
.green{
background-color:#09C;
text-align:center;
color:#fff;
padding:100px 0;
}
.green .wrap{
max-width:780px;
margin:0 auto;
}
.green .wrap .hr{
border:1px solid #078494;
margin:30px auto;
width:65%;
}
.green .wrap .item span{
display:inline-block;
width:100px;
height:100px;
background-color:#0D6F7C;
margin:50px 30px;
-webkit-transform:rotate(45deg);
}
.wrap p{
margin:30px auto;
}
.gray{
background-color:#333;
clear:both;
}
.article:after{
content:"";
display:block;
clear:both;
}
.article:nth-child(odd){
background-color:rgba(255,255,255,0.05);
}
.gray .article .img{
width:45%;
}
.gray .article .text{
width:55%;
}
.gray .img img{
width:100%;
}
.article > div{
float:left;
}
.gray .text{
position:relative;
top:70px;
left:80px;
}
.text h2{
margin-bottom:20px;
}
.purple{
background-color:#60F;
text-align:center;
padding:100px 0;
}
.content{
margin:0 auto;
}
.content h1{
margin-bottom:20px;
}
.card{
width:50%;
min-height:100px;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo"><a href="#">王小白</a></div>
<ul>
<li><a href="#">注册</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
</ul>
</nav>
<div class="banner">
<div class="inner">
<h1>王小白</h1>
<p>这是一个神奇的地方，在这里你将得到魔法，很神奇吧，快加入我们吧！</p>
<button>了解我</button>
<div class="more">更多</div>
</div>
</div>
</header><!--页眉-->
<div class="content">
<div class="green">
<div class="wrap">
<h2>一个标题</h2>
<div class="hr"></div>
<p>你可知谁吗?等等我魁岸设计者滑稽记者都叫我的就是顶尖的减肥就饿哦</p>
<div class="item">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
</div>
<div class="gray">
<div class="article">
<div class="img"><img src="img/pic01.jpg" /></div>
<div class="text">
<h2>又一个标题</h2>
<p>家拍卖等口岸配图它们摩奥赴欧饿哦无IC就到了</p>
</div>
</div>
<div class="article">
<div class="text">
<h2>又一个标题</h2>
<p>家拍卖等口岸配图它们摩奥赴欧饿哦无IC就到了</p>
</div>
<div class="img"><img src="img/pic02.jpg" /></div>
</div>
<div class="article">
<div class="img"><img src="img/pic03.jpg" /></div>
<div class="text">
<h2>又一个标题</h2>
<p>家拍卖等口岸配图它们摩奥赴欧饿哦无IC就到了</p>
</div>
</div>
</div>
<div class="purple">
<div class="content">
<h1>标题</h1>
<p>真正的坚韧，应该是哭的时候要彻底，笑的时候要开怀，说的时候要淋漓尽致，做的时候不要犹豫。</p>
<div class="cards">
<div class="card">
<h3>标题三</h3>
<p>活着一天，就是有福气，就该珍惜。当我哭泣我没有鞋子穿的时候，我发现有人却没有脚。</p>
</div>
<div class="card"></div>
</div>
</div>
</div>
</div><!--内容-->
<footer></footer><!--页脚-->
</body>
</html>
