上一节作业，怎么才能做到响应式？求批改

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    body, div, ul, li ,img{
    	padding: 0;
    	margin: 0;
    	font-size: 24px;
    	font-family: 'Microsoft Yahei';
    }

    .container {
    	width: 100%;
    	height: 100px;
    	background: #000;
      position: fixed;
      top:0;
      left:0;
    	/*position: absolute;
    	top: 50%;
    	left: 50%;
    	margin-left: -550px;
    	margin-top: -50px;*/

    }

    .container img {
    	cursor: pointer;
    }

    .nav {
    	display: inline-block;
    	width: 800px;
    	height: 100px;
    }

    .nav ul {
    	list-style-type: none;
  		position: absolute;
  		top: 0;
  		right: 10px;

    }

    .nav ul li {
  		display: inline-block;
  		float: left;
  		text-align: center;
  		line-height: 100px;
  		padding: 0 34px;
  		cursor: pointer;
    }

    a {
    	text-decoration: none;
    	color: #fff;
    }

     ul li:hover {
    	background: #14191e;
    }
	
    .ad {
      width:100%;
    }

    .ad img {
      width:100%;
      margin: 0;
    }

    .footer {
    	width: 100%;
    	height:100px;
    	background: #000;
    	text-align:center;
    	line-height: 100px;
    	font-size:16px;
      position: fixed;
      left: 0;
      bottom: 0;
    }
    .footer a {
       margin-left: 20px;
    }
    .footer a:nth-child(1) {
       margin-left: 0px;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="container">
      <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="" >
      <div class="nav">
		 <ul>
			<li><a href="#">课程</a></li>
			<li><a href="#">职业路径</a></li>
			<li><a href="#">实战</a></li>
			<li><a href="#">袁问</a></li>
			<li><a href="#">手记</a></li>
		 </ul>
      </div>
  </div>
  <div class="ad">
     <img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg" alt="">
     <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg" alt="">
     <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg" alt="">
  </div>

  <div class="footer">
		<a href="#">网页首页</a>
		<a href="#">企业合作</a>
		<a href="#">人才招聘</a>
		<a href="#">联系我们</a>
		<a href="#">常见问题</a>
		<a href="#">友情链接</a>
  </div>
</body>
</html>

highcker 2017-07-14

源自：CSS网页布局基础 2-8 经典的两列布局