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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

<!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>