i am new in the Website developement. i tried to responsive this code..but its not working. i just wants to make this page responsive. i am trying this webpage to be responsive on mobile , tablet , laptop view this is my html code
body{background-color:black}
.main{ margin:0 auto; padding:0px;background-color:white;font-family:Arial,Helentica;font-size:12px; color:#000;width:935px;background-color:white}
.header{width:814px;height:123px;padding:65px 0px 0px 120px;font-size:12px; color:black;font-family:Arial;background-color:white}
.logo1{float:left;padding-right:50px;}
.logo2{float:right;padding-right:50px}
.text1{float:left;text-align:center;font-size:20px;color:brown}
.navbar{float:left;padding:0px;margin:0px;background-color:gray;height:30px;position:absolute;width:934px}
.navbar ul{ display:inline; list-style:none;}
.navbar li{float:left;text-align:center;font:normal bold 12px/2.5em Arial,verdana;text-decoration:none;}
.navbar ul li a{ padding:0 20px 0 20px; border-left:1px solid black;text-decoration:none;color:white;display:block-line;height:50px;}
.navbar li:hover, a:hover {background-color:black;}
.navbar li ul {display: none; height: auto;margin: 0;padding:0}
.navbar li ul {position:absolute;width:100%;left:0}
.navbar li:hover ul {display: block}
.navbar li ul li {background-color:gray;border:1px solid black}
.navbar li ul li a:hover{background-color:black;}
#mid-wraper{width:934px; margin:0 auto; padding:0px;}
#mid-wraper-inner{width:934px; float:left; background-color:white}
#left-wraper{width:296px; float:left; bacground-color:white}
#left-wraper-top{width:296px; background:white; padding:14px 0px 12px 0px; float:left;}
#video{width:270px; float:left; padding:1px 0px 10px 15px; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:12px;background-color:white}
.link{font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#fff; text-decoration:none; text-align:right;}
.link:hover{font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#fff; text-decoration:none; text-align:right;}
.link2{font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#bc4105; text-decoration:none; text-align:right;}
.link2:hover{font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#bc4105; text-decoration:none; text-align:right;}
#right-wraper{width:596px; float:left; padding:15px 0px 0px 25px;}
.right-part{width:596px; float:left;}
#foter{width:934px; margin:0 auto; padding:0px; color:#999999; }
#foter-inner{width:934px; float:left; padding:10px 0px;}
.footer-link{color:#999999; text-decoration:none; padding:0px 5px;}
.footer-link:hover{color:#999999; text-decoration:none; padding:0px 5px;}
This is my html
i have bootstrap and i tried a lot but its getting messy
please help<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="style.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><style>
@media only screen and (max-width: 1024px) {
body {
background-color:black;
}
}
@media only screen and (max-width: 768px) {
body {
background-color:black;
}
}
</style></head><body><div class="main"><div class="header"><div class="logo1"><img src="images/logo1.jpg" alt="" height="100" width="100"></div><div class="text1"><strong>AGNIHOTRI COLLEGE OF ENGINEERING,<br>WARDHA</strong><br><div style="float:left;text-align:center;font-size:12px;color:brown;padding-left:50px">(Near Bypass Highway,Nagthana Road Sindi(Meghe))<br>Email:ace@agnihotri.org<br>Phone:07152-250152</div> </div><div class="logo2"><img src="images/12.png" alt="" height="100" width="100"></div></div><div class="navbar"><ul><li><a href="index.html">Home</a></li><li><a href="governance.html">Governance</a></li><li><a href="campus.html">Campus</a></li><li><a href="#">Department</a><ul><li><a href="#">Basic Science</a></li><li><a href="#">Machanical Engineering</a></li><li><a href="#">Civil Engineering</a></li><li><a href="comp.html">Computer science & Engineering</a></li><li><a href="#">Electronics & Communication Engineering</a></li><li><a href="#">M.Tech(computer science & Engg.)</a></li><li><a href="#">M.Tech(Electronics)</a></li></ul> </li><li><a href="addmission.html">Addmission</a></li><li><a href="facility.html">Facility</a></li><li><a href="download.html">Download</a></li><li><a href="place.html">Placement</a></li><li><a href="gallary.html">Gallary</a></li></ul></div><div class="middle"><div class="mid-wrapper"><img src="images/3.jpg" width="934px" height="250px"</div></div><div id="mid-wraper"><div id="mid-wraper-inner"><div id="left-wraper"><div id="left-wraper-top"><div
style="margin: 0px;width: 256px; float: left; display: block;background-color:white;padding-left:20px"><h2 style="background-color:brown;text-align:center;color:white">News</h2><marquee direction="up"><b><p style="text-align:center">ALL THE BEST STUDENTS <br>FOR UNIVERSITY EXAM:</p><b><br><p style="color:blue;text-align:center">University Summer 2018<br> Exam Timetables<br> Are Available In<br> The Download Section: </marquee></p></div></div><div id="video"><h2 style="background-color:brown;text-align:center;color:white">Video</h2><video controls autoplay width="300px" height="100px"><source src="images/college.mp4" type="video/mp4"></video></div><div style="padding-left:30px"><img src="images/img1.jpg" alt="" width="250px" height="150px"></div></div><div id="right-wraper"><div class="right-part"><h2 style="background-color:brown;text-align:center;color:white">Welcome to Agnihotri College Of Engineering</h2><div style="padding: 10px 0px; width: 596px; float: left;background-color:white">
In this angnihotri collge of engineering is a very big collge..they have many facilities for student and teacher staff..so please check my wesite to many student..i am hope so very nice collge..<br><br><div style="background-color:brown;color:white;width:150px;height:20px;text-align:center">Our Vision</div><br>
To develop globally competent, efficient learner and community oriented model of Engineering education.<br><br><div style="background-color:brown;color:white;width:150px;height:20px;text-align:center">Our Misson</div><br>
To create value added, competent and research oriented trained Engineering professionals for sustainable development of the society.<br><br><br><div class="right-part" style="padding: 10px 0px;"><div style="width: 290px; float: left;"><h2 style="background-color:brown;color:white;text-align:center">President's Message</h2><div style="padding-left:90px"><img src="images/presi.gif" alt="" width="100px" height="70px"></div><br><div
style="border-right: 1px solid rgb(153, 153, 153); width: 289px; float: left; padding-right: 10px; margin-top: 10px;">
I feel proud and happy to introduce to you ACE and welcome you to this prestigious institution, ACE is managing unprecedented growth through proliferation of a variety of knowledge institutes as part<br><a href="governance.html" class="link2" style="float: right;">read more</a></div></div><div style="width: 270px; float: right; padding-right: 10px;"><h2 style="background-color:brown;text-align:center;color:white">Scretory's Message</span></h2><div style="padding-left:90px"><img src="images/secre.gif" alt="" width="100px" height="70px"></div><br><div
style="width: 269px; float: left; padding-right: 10px; margin-top: 10px;">
Our vision is to develop a strong, enthusiastic manpower from Engineering Stream with an excellent academic standing of a global level. The globalization has created many challenges of Competition, training and placem<br><a href="governance.html" class="link2" style="float: right;">read more</a></div></div><div style="width: 500px; float: left;"><h2 style="background-color:brown;color:white;text-align:center">Principle's Message</h2><div
style="border-right: 1px solid rgb(153, 153, 153); width: 550px; float: left; padding-right: 10px; margin-top: 10px;">
Education is an essential human virtue, necessity for society and basis of good life. Addison says-"What sculpture is to a block of marble, education is to the soul".<a href="governance.html" class="link2" style="float: right;">read more</a></div></div></div></div></div></div><div id="foter"><div id="foter-inner"><p
style="margin: 0px; padding: 0px; width: 550px; float: left; display: block;"><a
href="#" class="footer-link">Home</a> <a href="#" class="footer-link">About
us</a> <a href="#" class="footer-link">Recent articles</a> <a href="#"
class="footer-link">Email</a> <a href="#" class="footer-link">Resources</a><a href="#" class="footer-link">Links</a></p><p
style="margin: 0px; padding: 0px; width: 200px; float: right; text-align: right; display: block;">©
Designed by <a class="footer-link" target="_blank"
href="http://www.htmltemplates.net/">htmltemplates.net</a></p></div></div></div></body></html>please someone help to get this page responsive Thanks in advance