关于2-11问题

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title></title>
<style type="text/css">
 *{
  padding: 0;
  margin:0;
 }
     .yemian{
      background-color:#00ffff;
      width: 100%;
      height: 1000px;
     }
 .nav{
  height:100px;
  width: 100%;
  background-color: black;
  color:white;
  position: fixed;
  top: 0;
     }
 .nav .logo{
  height:100px;
  float: left;
 
 }
.nav span{
  float: right;
  height: 100px;
        text-align: center;
  line-height: 100px;
  word-spacing: 50px;
   padding-right: 100px;}
    .container{
     width: 70%;
     height: 800px;
     margin:0 auto;
     padding-top: 100px;
     padding-bottom: 100px;
      
    }
    .one{
     width: 35%;
 
        float: left;}
    .one1{
     width: 500px;
     height: 50px;
     margin:10px 0;
     word-spacing: 10px;
    }
    .one1 span{
 
        background-color:#d2691e;
    }
    .two{
      width: 35%;
      height: 700px;
      
      float: left;
      word-spacing: 10px;}
    .two div{
     margin: 15px 0;
     font-weight: 700;
    }
    .footer{
      text-align: center;
      height: 100px;
      width: 100%;
      line-height: 100px;
      word-spacing: 15px;
      background-color: black;
      color:white;
      position: fixed;
      bottom: 0px;
    } 
    .three{
     width: 25%;
     height: 800px;
     float: left;
     background-color:#00ffff; 
     position: relative;
     border-left: thick solid orange;
    }
    .three .biaodan{
     width: 100px;
     height: 100px;
        position: absolute;
        top:50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
    .sub{
     background-color: red;
     color: white;
     display: inline-block;
     width:100px;
     height:50px;
     text-align: center;
    }
    .biaodan h1,input{
     margin: 10px auto;
    }
   </style>
</head>
<body>
<div class="yemian">
<div class="nav">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></div>
<span>课程 职业路径 实战 猿问 手记</span>
</div>
<div class="container">
<div class="one">
<h1>课程推荐</h1>
<div class="one1"><span>职业路径</span> HTML5与CSS3实现动态网页</div>
<div class="one1"><span>职业路径</span> 零基础入门Android语法与界面</div>
<div class="one1"><span>职业路径</span> Ios基础语法与常用控件</div>
<div class="one1"><span>职业路径</span> PHP入门开发</div>
<div class="one1"><span>职业路径</span> Java入门开发</div>
</div>
<div class="two">
<h1>相关课程</h1>
<div>HTML CSS JAVAScript</div>
<div>HTML CSS5 Jquery</div>
<div>移动端基础 移动端app开发</div>
   </div>
   <div class="three">
    <form>
    <div class="biaodan">
    <h1>登录</h1>
    <input type="text" name="name" placeholder="请输入登录邮箱/手机号" /><br/>
    <input type="password" name="pd" placeholder="请输入密码"/><br/>
    <input type="submit" name="sub" class="sub" />
    </div>
    </form>
   </div>
</div>
   <div class="footer">
    <span>网站首页 企业合作 人才招聘 联系我们 常见问题 友情链接</span><br/>
   </div>
</div>
</body>
</html>
请问老师关于这段代码我有两个疑问想请教老师。
1.我应该怎样将one，two里的内容居中？因为我给代码已设置position就会发生重叠现象。
2.请问老师我的页面右侧的three为什么下滑的时候会覆盖fixed的页头部分？