为什么总是不对呢？有什么问题啊 纠结...

我现在跟着视频学习Javascript，照着视频上的代码重新敲了一遍。这段代码做的事论坛的首页，代码如下:
index.html:<!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>Accp教程网论坛</title>
<link rel="stylesheet" type="text/css" href="img/style.css"/>
</head><body>
<Div class="main w">
<div class="header w">
<div class="logo"><img src="img/logo.png" alt="Accp编程论坛网" /> </div>
<div class="menu w">
<span><a href="login.html">登陆</a> | <a href="reg.html">注册</a></span>
</div>
</div><!--header end-->
<div class="body1 w">
<div class="title w">
<span class="one">论坛</span><span class="two">主题</span><span class="three">最后发表时间</span>
</div>
</div><!--body1 end-->
</Div><!--main end-->
</body>
</html>style.css:
@charset "utf-8";
/* CSS Document */
body{ font-size:13px; }
.w{ width:900px; }
.main{ margin:0 auto;}
.header{}
.menu{ border:1px solid  #000000;height:25px; margin-top:10px; line-height:25px;}
.menu span{ margin-left:15px;}
.body1{ border:1px solid #000000; margin-top:10px;}
.body1.title{ border-bottom:1px solid #000000; height:30px; line-height:30px;}
.body1.title.one{ margin-left:200px;}
.body1.title.two{ margin-left:200px;}
.body1.title.three{ margin-left:100px;}问什么出来的效果跟视频上的不一样呢，我从头到尾检查了一遍，跟视频上面的一模一样，没有敲错。
为什么 论坛 主题 最后发表时间这三项还是挤在一起啊？
.body1.title.one{ margin-left:200px;}
.body1.title.two{ margin-left:200px;}
.body1.title.three{ margin-left:100px;}这三句为什么不起作用？  纠结的要死，我是新手，帮帮我吧