I'm brand new to web development and I have build a little website with 3 pages. My goal is to use @media tags to make it responsive for the following: max-widths: 980px, 768px and 640px. I did the first page and it's been acting weird. How can I make the entire website responsive? Please to assist. My code for all 3 pages and the media is attached. Thanks.
/*first page */
<head>
<title>AboutMe</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li class="contact"><a href="contact.html">Contact</a></li>
<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
<li class="about">About</li>
</ul>
</div>
</div>
<div class="middle-about-me">
<div class="center">
<h3> About Me</h3>
<hr>
<p class="myinfo">Hi my name is ..... and I was born on October 9th, 1971 in ......
<img src="assets/img/author.jpg" width="150px" height="150px"><br>
  To briefly introduce the... to you I would say it is a country located on the........>
    shares the same borders with ....... It is the world largest<br>
 producer of coacoa used for chocalate and lotions. In one word, it's the country where chocolate tastes like<br>  real chocolate. Since the last discovery of petrol in the country, it's been a little agitated as France and the<br>US want to control the discovery. After obtaining my masters in Business Management, I worked as the marketing representative for an american company before moving to the US to pursue a degree in Mathematic at UNT Dallas and worked for...,...., and.... as a Math instructor. My goal in this program is to learn to build websites from scratch and later on to build apps from scratch. I've got the right instructional staff and the right TAs to help me reach that goal. All I have to do is to go to work.<br>   "Impossible is nothing", Muhammad Ali.</p>
<p class="smile"><i>hover on my picture and start smiling</i></p>
</div>
</div>
<div class="footer">
<p class="footer-copyright">Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
</body>
/*second page */
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li><a href="contact.html">Contact</a></li>
<li>Portfolio</li>
<li><a href="index.html">About Me</a></li>
</ul>
</div>
</div>
<div class="middle">
<div class="center-portfolio">
<h3> Portfolio</h3>
<hr>
<div class="div1"><img src="assets/img/career1.jpg" height="120px" width="150px"></div>
<div class="div2"><img src="assets/img/chocolatour.jpg" height="120px" width="150px"></div>
<div class="div3"><img src="assets/img/guildhouse.jpg" height="120px" width="150px"></div>
<div class="div4"><img src="assets/img/career2.jpg" height="120px" width="150px"></div>
<div class="rotateIn div5"><img src="assets/img/Abidjan1.jpg" height="120px" width="150px"></div>
<div class="div6"><p><i>please to hover on the images</i></p></div>
<div class="banner1">career picture 1</div>
<div class="banner2">chocolate tour</div>
<div class="zoomIn banner5">Abidjan</div>
<div class="banner4">career picture 2</div>
<div class="banner3">Guild Brussels</div>
</div>
</div>
<div class="footer">
<p class="footer-copyright"> Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
</body>
/*third page */
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li>Contact</li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="index.html">About Me</a></li>
</ul>
</div>
</div>
<div class="middle">
<div class="center">
<h3> Contact</h3>
<hr>
<form>
  Name:<br>
<input id="namebox" type="text" name="name" required="" placeholder="your name">
<br><br>
  Email:<br>
<input id="emailbox" type="Email" name="email" required="" placeholder="example@yahoo.com">
<br><br>
  Message:<br>
<textarea id="messagebox" style="height: 200px; " name="message" placeholder="Enter massage here" required="">
</textarea>
<br><br>
  <input type="submit" value="submit" name="submit">
</form>
<br>
</div>
</div>
<div class="footer">
<p class="footer-copyright">
Copyrigtht © 2019 Portfolio "name" All rights reserved.
</p>
</div>
</div>
</body>
/* Width at 768px and below */
@media screen and (max-width: 768px) {
body {
background-color : #E9967A;
}
.container {
background-color: green;
border-style: none;
width: 50%;
}
.middle-about-me,
.footer, .top{
width: 50%;
}
.middle-about-me{
width: 50%%;
}
}
/*Width at 640px and below */
@media screen and (max-width: 640px) {
body {
background-color : #E9967A;
}
.container {
background-color: green;
border-style: none;
width: 50%;
}
.middle-about-me,
.footer, .top{
width: 50%;
}
.middle-about-me{
width: 50%%;
}
}
