Responsive media query is not working - html

Question

I coded in main.css and I checked in the browser it was perfectly fine. I created another file named responsive.css the logo hasn't moved at all and the rest like images, wrapper too the same when I resized the browser. I have moved responsive above main link. But it still the same.
#charset "utf-8";
/* CSS Document */
#import url(http://fonts.googleapis.com/css?family=Vidaloka|Philosopher);
* {
box-sizing : border-box;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0;
}
.sectionPage {
width: 100%;
height: 100vh;
}
/* ==========================================================================
BACKGROUND
========================================================================== */
#home,
#skills,
#contact {
background-color: #000000;
background-image: url(http://www.transparenttextures.com/patterns/subtle-dots.png);
}
#about,
#work,
#services {
background-color: #fcfcfc;
background-image: url(http://www.transparenttextures.com/patterns/skulls.png);
}
/* ==========================================================================
FOR TITLE OF ALL SECTION PAGE
========================================================================== */
h1 {
text-align: center;
font-size: 30px;
font-family: 'Vidaloka', serif;
}
/* ==========================================================================
HOME
========================================================================== */
p {
font-family: 'Philosopher', sans-serif;
}
#home > img {
text-align: center;
margin-top: 5em;
margin-left: 44.5%;
}
#home > h1 {
color: #ffffff;
margin-top: 2em;
margin-bottom: 2em;
font-size: 2em;
}
#home > a {
font-size: 16px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #ffffff;
border-radius: 25px;
background-color: #1199C3;
padding: 10px;
text-align: center;
margin-left: 45%;
}
#home > a:hover {
color: #000000;
background-color: #0B637E;
}
/* ==========================================================================
ABOUT
========================================================================== */
#about > h1 {
color: #1199C3;
top: 8%;
position: relative;
}
.wrapper > img {
background-size: cover;
background-repeat: no-repeat;
border: 5px;
border-radius: 50%;
border-color: #ffffff;
border-style: solid;
width: 120px;
height: 140px;
margin-top: 1%;
margin-bottom: 0;
}
.wrapper {
margin: 10px auto;
text-align: center;
background-color: #1199C3;
padding-bottom: 0.1%;
padding-top: 2%;
width: 25%;
border-radius: 3%;
position: relative;
top: 6%;
}
.wrapper > p {
font-size: 20px;
color: #ffffff;
}
#about > p {
text-align: center;
font-size:18px;
margin-left: 2em;
margin-right: 2em;
position: relative;
top: 5%;
}
#about > a {
font-size: 16px;
background-color: #1199C3;
border-radius: 5px;
color: #ffffff;
text-decoration: none;
padding: 1%;
margin-left: 41%;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#about > a:hover {
color: #1199C3;
background-color: #0B637E;
}
#about > a {
position: absolute;
top: 198%;
left: 0em;
}
/* ==========================================================================
SKILLS
========================================================================== */
#skills > h1 {
color: #1199C3;
font-size:2.5em;
padding-top: 5%;
}
#skills > p {
text-align: center;
color: #ffffff;
font-size: 28px;
line-height: 0%;
padding: 5%;
}
.gallery > img, {
text-align: center;
margin-top: 3em;
margin-right: 0;
}
.gallery > li {
display: inline;
list-style: none;
}
.gallery {
left: 28%;
position: relative;
}
.software > img {
text-align: center;
margin-top: 3em;
margin-right: 0;
}
.software > li {
display: inline;
list-style: none;
}
.software {
left: 33%;
position: relative;
}
/* ==========================================================================
WORK
========================================================================== */
#work > h1 {
color: #1199C3;
font-size:2.5em;
padding-top: 5%;
}
#work > p{
text-align: center;
font-size:18px;
padding-top: 5%;
margin-left: 2em;
margin-right: 2em;
}
#work > a {
background-color: #1199C3;
border-radius: 5px;
color: #ffffff;
text-decoration: none;
padding: 1%;
margin-left: 40%;
margin-top: 6em;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#work > a:hover {
color: #1199C3;
background-color: #0B637E;
}
.tweet, .msg {
text-decoration: none;
color: #1199C3;
}
/* ==========================================================================
SERVICES
========================================================================== */
#services > h1 {
color: #1199C3;
font-size:2.5em;
padding-top: 5%;
}
#services > img {
text-align: center;
padding-top: 3%;
padding-left: 2%;
padding-right: 2%;
margin-left: 15%;
width: 70%;
height: auto;
}
#services > p{
text-align: center;
font-size:18px;
padding-top: 2%;
margin-left: 2em;
margin-right: 2em;
}
/* ==========================================================================
CONTACT
========================================================================== */
#contact > h1{
color: #1199C3;
font-size:2.5em;
padding-top: 3%;
position: relative;;
top: 3%;
}
#contact > p {
text-align: center;
font-size:18px;
padding: 1%;
color: #ffffff;
line-height: 2px;
}
.container{
width: 50%;
height: 50%;
padding: 2%;
margin-top: 1em;
margin-left: 25%;
background-color: #0B637E;
border-radius: 5px;
}
#name, #email, #bio{
border-radius: 5px;
border-style: solid;
border-color: #1199C3;
width: 100%;
padding: 2%;
margin-top: 1em;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#bio {
height: 140px;
}
#name, #email, #bio {
font-size: 14px;
color: #000000;
}
#button {
position: relative;
top:5px;
border-radius: 3px;
border-color: #1199C3;
border-style: solid;
background-color: #FFFFFF;
color: #000000;
padding: 5px;
float: right;
}
#contact > ul {
margin-left: 25%;
}
#contact > ul > li {
list-style: none;
display: inline-block;
margin-left: 5%;
}
#contact > ul > li > a {
color: #ffffff;
text-decoration: none;
}
#contact > ul > li > a:hover {
color: #1199C3;
}
/* ==========================================================================
FOOTER
========================================================================== */
footer {
background-color: #1199C3;
position: relative;
bottom: 0%;
}
footer > ul {
padding-left: 8%;
padding-top: 1%;
margin-left: 27%;
}
footer > ul > li {
list-style: none;
display: inline-block;
padding-left: 1%;
padding-top: 1%;
font-size: 12px;
text-align: center;
}
footer > ul > li > a {
text-decoration: none;
color: #ffffff;
margin-left: 0;
}
footer > ul > li > a:hover {
color: #000000;
}
footer > p {
color: #ffffff;
text-align:center;
padding-bottom: 2%;
position: relative;
bottom: 8%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alzira Barretto</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/responsivemobilemenu.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="http://fonts.googleapis.com/css?family=Vidaloka|Philosopher" rel="stylesheet" type="text/css">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/responsivemobilemenu.js"></script>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Vidaloka::latin', 'Philosopher' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<!-- MAIN MENU-->
<body>
<div class="rmm">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>MY SKILLS</li>
<li>MY WORK</li>
<li>SERVICES</li>
<li>CONTACT ME</li>
<li>BLOG</li>
</ul>
</div>
<div id="wrapper">
<div class="sectionPage" id="home">
<img src="img/ab-logo.svg" alt="ab logo">
<h1>DESIGN & CODE</h1>
<a class="welcome" href="#about">WELCOME</a>
</div>
<!-- ABOUT ME -->
<div class="sectionPage" id="about">
<h1>A LITTLE NOTE ABOUT ME</h1>
<div class="wrapper">
<img src="img/alzira.jpg" alt="">
<p><strong>ALZIRA BARRETTO<br>MUMBAI, INDIA<br>FRONT-END DEVELOPER<br></strong></p>
</div>
<p>I was raised in Mumbai, India. Ever since I was a child I learnt
from my dad how to draw. What attract me the most is an amazing colors and
shapes. From the basic foundations, I've studied a lot about Graphic
Designing and joined in 3 years of fine arts. When comes to
web designing, I've learnt some of the courses in Treehouse since
2014. I'm keen to learn more about new languages. I have build
one website of my own and still in processing. I work hard to complete my project. I couldnt resist my finger from coding.</p>
<p>Apart from web designing, I love to draw, stitching, craft (DIY),
and obvious love to travel and explore new places.</p>
<p>Thanks for stopping by!!!</p>
DOWNLOAD MY CV
</div>
<!-- MY SKILLS -->
<div class="sectionPage" id="skills">
<h1>MY SKILLS</h1>
<p>CODE I USE</p>
<ul class="gallery">
<li><img src="img/HTML.svg" alt="html" width="100" height="100"></li>
<li><img src="img/CSS.svg" alt="css" width="100" height="100"></li>
<li><img src="img/JSCRIPT.svg" alt="js" width="100" height="100"></li>
</ul>
<p>SOFTWARE I USE</p>
<ul class="software">
<li><img src="img/photoshop.svg" alt="ps" width="100" height="100"></li>
<li><img src="img/Illustrator.svg" alt="ai" width="100" height="100"></li>
</ul>
</div>
<!-- MY WORK -->
<div class="sectionPage" id="work">
<h1>MY WORK</h1>
<p> It's just the beginning to build my portfolio and not just a professional one but to enhance my skills and gain more knowledges. I really do love my job and do what I love. I'm still learning new languages like Ruby, Drupal, Php, Javascript and of course Android apps. I would be appreciate if you really love my work and hire me to working with you. Please don't hesitate to <a class="msg" href="#contact">contact me</a> or tweet me <a class="tweet" href="http://www.twitter.com/#Albardesign">#Albardesign</a></p>
<p>I have a creative mind and I'd love to post it to show off my work. I am working on complete study cases.</p>
<a class="portfolio" href="https://www.behance.net/Alzira25">CHECK MY PORTFOLIO</a>
</div>
<!-- SERVICES -->
<div class="sectionPage" id="services">
<h1>SERVICES</h1>
<img src="img/devices.svg" alt="devices" width="500px" height="500px">
<p>As new technology increase, we build the website in Responsive style. Range from the biggest size of the Computer to the Tablet and goes to the smallest size of mobile devices. Mobile devices is the most popular used by people. We transform the website into the rich look.</p>
<p><strong><font size="+2" color="#1199C3">BUILD. REDESIGN. LAUNCH</font></strong></p>
<p><font size="+4" color="#1199C3"><em>VOILA!</em></font></p>
</div>
<!-- CONTACT -->
<div class="sectionPage" id="contact">
<h1>CONTACT ME</h1>
<p>Love to hear from you</p>
<p>Please feel free to drop the messages</p>
<div class="container">
<form id="form" action="send_form.php" method="post">
<input type="text" id="name" name="user_name" placeholder="Your Name"/>
<input type="email" id="email" name="user_email" placeholder="Your Email"/>
<textarea id="bio" name="user_message" placeholder="Write the message"></textarea>
<button id="button" type="submit">SEND</button>
</form>
</div>
<ul>
<li><img src="img/twitter.svg" alt="tweet" width="40" height="40">FOLLOW ME</li>
<li><img src="img/mail.svg" alt="mail" width="40" height="40">MAIL ME</li>
</ul>
<!-- FOOTER -->
<footer>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>CONTACT</li>
<li>BLOGS</li>
</ul>
<p>ALZIRA BARRETTO|2015</p>
</footer>
</div>
</body>
</html>