Different HTML pages with same codes look completely different - html

I'm very much in need of some help since I have some problems with my navigationbar. One of my buttons is a dropdown, but my dropdown content is stuck inside of the nav and I want it to drop right below it.
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 4000); // Change image every 2 seconds
}
.topnav {
background-color: #ffffff;
overflow: hidden;
position: fixed;
margin-top: -10%;
margin-left: -1%;
margin-bottom: 10%;
width: 110%;
padding-bottom: -3%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 50px 50px;
text-decoration: none;
font-size: 20px;
font-family: Impact, Charcoal, sans-serif;
}
.topnav a:hover {
font-family: Impact, Charcoal, sans-serif;
color: #ff3385;
text-decoration: underline #ff3385;
font-size: 30px;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
li a,
.dropbtn {
display: list-item;
margin text-align: center;
text-decoration: none;
border: none;
outline: none;
color: white;
background-color: inherit;
position: fixed:
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: white;
}
li.dropdown {
display: inline-block;
float: left;
}
.dropdown-content {
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 100;
margin-top: 25%;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
float: left;
}
.logo {
margin-top: 10%;
margin-bottom: -0.75%;
margin-left: 10%;
padding-top: 25px;
position: relative;
}
.mySlides {
display: none;
position: absolute;
margin-left: -9.5%;
margin-top: -27.1%;
margin-right: 10%;
}
.h1 {
font-size: 300%;
letter-spacing: -1px;
text-align: center;
padding-top: 1.5%;
font-family: Impact, Charcoal, sans-serif;
}
h2 {
font-family: Impact, Charcoal, sans-serif;
font-size: 300%;
letter-spacing: 0px;
line-height: 150%;
text-align: center;
text-decoration: underline #ff3385;
color: #ff3385;
}
p {
font-size: 150%;
letter-spacing: 0px;
line-height: 150%;
text-align: left;
text-decoration: none;
color: black;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin-left: 10%;
margin-right: 10%;
}
.møbler {
padding: 1%;
margin-left: 4%;
margin-bottom: 10%;
float: left;
}
footer {
color: black;
background-color: #f1f1f1;
clear: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 15px;
line-height: 200%;
margin-left: 2%;
}
<html>
<head>
<title>Herningmøbelengros.dk</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Mastercss.css" />
<script src="newjavascript.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body bgcolor="#f5f5f0">
<header>
<nav>
<div class="topnav" id="myTopnav">
Hjem
☰
<li class="dropdown">
Møbler
<div class="dropdown-content">
Borde
Stole
Skabe
</div>
</li>
Om os
</div>
</nav>
</header>
<div class="logo">
<img src="LOGO.PNG" alt="Herning Bolig engros møbler" align="center" style="width:30%" />
</div>
<section>
<div class="w3-content w3-section" style="max-width:100px">
<img class="mySlides" src="førsøgsbillede.jpg" style="width:53.3%" />
<img class="mySlides" src="førsøgsbillede 2.jpg" style="width:53.3%" />
<img class="mySlides" src="førsøgsbillede 3.jpg" style="width:53.3%" />
</div>
</section>
<h1 class="h1">Køb stort - betal småt</h1>
<hr>
<footer>
<div style='float:left; width:30%'>
<strong>Kontakt</strong> <br>Telf: +45 21 42 28 99<br> Email:Jydskm#gmail.com
</div>
<div style='float:left; width:30%; margin-left:30px'>
<strong>Lokation</strong> <br>Find os på Industrivej Syd 1B<br> 7400 Herning
</div>
<div style='float:left; width:30%; margin-left:30px'>
<strong>Åbningstider</strong> <br>Ons-fre 10.00-17.00<br> Lør-søn 10.00-16.00
</div>
</footer>
</body>
</html>


You have a <li> elements without a preceding <ul> element. That's the first thing I really notice about your nav menu. You also have a bunch of inline styles, but you also have an external CSS document? It looks like you need to do some research on the basic syntax of HTML and CSS. You link to a W3 Schools stylesheet, so I assume you are familiar with that site. Use Google and search for how to create a proper dropdown menu with HTML and CSS. I guarantee it will be one of the first two or three results. Stack Overflow should really be used for when you've already done a bit of research and can't get the answer for exactly what you're trying to do.

Related

Link in image is not working on full image

My link which would go to the home page is on the Egypt coat of arms. But the link is only clickable on the nav bar. How do I fix it? The first block is HTML and the second is CSS.-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
html
css
(HTML)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="coatofarms"> <img src="coabetter.png" class="coa" width="75px"></div>
<div class="topnav">
News
Contact
About
</div>
<button type="button"class="buttonbook" >BOOK</button>
<div style="padding-left:16px">
<h2></h2>
<p></p>
</div>
</body>
</html>
(CSS)
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url("goodyegypt.png")
}
.coatofarms {
margin-top: -16px;
margin-left: 5px;
width: 5%;
}
.topnav {
overflow: hidden;
background-color: #e1bc85;
margin-top: -151px;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-left: 10%;
font-family: Bodoni Mt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.buttonbook {
background-color: #e9cda4;
border-radius: 50%;
width: 250px;
height: 100px;
border: none;
opacity: 0.7;
font-family: Algerian;
font-size: 30px;
margin-top: 35%;
margin-left: 43%;
align: center;
}
.buttonbook:hover {
background-color: #e1c295;
opacity: 0.7;
}

The use of margin-top as the only layout mechanism is what is causing you problems. In this fiddle I instead absolutely placed your button.buttonbook element.
https://jsfiddle.net/cwzp5dya/2/
.buttonbook {
position: absolute;
top: 55%;
left: 43%;
Highly recommend NOT using margin as your primary layout method.

Responsitivity for div

I have a problem concerning responsitivity. I want this symbol "=" to hold all the menu when the screen is smaller(let say 1000px). I know I have to use responsitivity but I don't know how.
This is my index:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<title>Tagesmutter Kiel</title>
</head>
<body style="background-color: #41430e">
<!--a href="javascript:void(0);" class="icon" onclick="allLinksInOneDiv()">☰</a-->
<div id="menu">
<div class="icon-bar">
<a class="active" href="index.html"><i class="fa fa-home"></i></a>
</div>
<div class="dropdown_wohnen">
<button class="dropbtnWohnen">Wohnen</button>
<div class="wohnen_content">
Eingenwöhnung
Konzeption
</div>
</div>
<div class="dropdown_betreung">
<button class="dropbtnBetreung">Betreungskosten</button>
<div class="betreungskosten_content">
Betreuungskosten
Freie Plätze
Bilder
</div>
</div>
<div class="dropdown_tag">
<button class="dropbtnTag">Tagesablauf</button>
<div class="tag_content">
Tagesablauf
Tageskinder
Gästebuch
</div>
</div>
<div class="dropdown_kontakt">
<button class="dropbtnKontakt">Kontakt</button>
<div class="kontakt-content">
Kontakt
Urlaub
Über mich
</div>
</div>
</div>
<div class="banner">
<img class="mySlides" src="../img/img1.jpg" height ="270" style="width:100%" alt="bannerSlide">
<img class="mySlides" src="../img/img2.jpg" height ="270" style="width:100%" alt="bannerSlide">
<img class="mySlides" src="../img/img3.jpg" height ="270" style="width:100%" alt="bannerSlide">
</div>
<div class="info">
<h1>Hallo, liebe Eltern! </h1>
<p style="
padding-left: 10px"> Sie suchen eine Tagesmutter für Ihr Kind? <br>
Ich hoffe, dass ich Ihnen mit diesen Seiten einen kleinen Einblick
in meine Arbeit als Tagesmutter ermöglichen kann. ☺ </p>
<h5>Tagesmutter Irene</h5>
</div>
</body>
</html>
And now the stylesheet:
#menu
{
background-color: #78409a;
display: flex;
margin-top: -2%;
margin-left: 15%;
margin-right: 10%;
width: 68%;
}
.icon-bar { margin-right: 0.2%;}
.icon-bar a
{
float: right;
color: white;
font-size: 710%;
}
.active {background-color: #4CAF50;}
.dropdown_whohnen
{
position: relative;
display: inline-block;
}
.dropbtnWohnen
{
background-color: #4CAF50 ;
color: white;
padding: 33.25%;
font-size: 100%;
border: none;
cursor: pointer;
}
.wohnen_content
{
display: none;
position: absolute;
background-color: #d5416e;
min-width: 13.2%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.wohnen_content a
{
color: black;
padding: 6% 6%;
text-decoration: none;
display: block;
}
.dropdown_wohnen:hover .wohnen_content {display: block;}
.dropdown_wohnen:hover .dropbtnWohnen {background-color: #3e8e41;}
.wohnen_content a:hover {background-color: #ddd}
.dropdown_betreung
{
position: relative;
display: inline-block;
margin-left: 0.3%;
}
.dropbtnBetreung
{
background-color: #4CAF50 ;
color: white;
padding: 24.7%;
font-size: 100%;
border: none;
cursor: pointer;
}
.betreungskosten_content
{
display: none;
position: absolute;
background-color: #DAF7A6 ;
min-width: 100%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.betreungskosten_content a
{
color: black;
padding: 15px 15px;
text-decoration: none;
display: block;
}
.dropdown_betreung:hover .betreungskosten_content {display: block;}
.dropdown_betreung:hover .dropbtnBetreung {background-color: #3e8e41;}
.betreungskosten_content a:hover {background-color: #ddd}
.dropdown_tag
{
position: relative;
display: inline-block;
margin-left: 0.3%;
}
.dropbtnTag
{
background-color: #4CAF50 ;
color: white;
padding: 29.2%;
font-size: 100%;
border: none;
cursor: pointer;
}
.tag_content
{
display: none;
position: absolute;
background-color: #78409a ;
min-width: 100%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.tag_content a
{
color: black;
padding: 5% 5%;
text-decoration: none;
display: block;
}
.dropdown_tag:hover .tag_content {display: block;}
.dropdown_tag:hover .dropbtnTag {background-color: #3e8e41;}
.tag_content a:hover {background-color: #ddd}
.dropdown_kontakt
{
position: relative;
display: inline-block;
margin-left: 0.3%;
}
.dropbtnKontakt
{
background-color: #4CAF50 ;
color: white;
padding: 34.09%;
font-size: 100%;
border: none;
cursor: pointer;
}
.kontakt-content
{
display: none;
position: absolute;
background-color: #12d3df;
min-width: 100%;
box-shadow: 10px 8px 16px 10px rgba(0,1,1,0.2);
z-index: 1;
}
.kontakt-content a
{
color: black;
padding: 15px 15px;
text-decoration: none;
display: block;
}
.dropdown_kontakt a:hover {background-color: #ddd}
.dropdown_kontakt:hover .kontakt-content {display: block;}
.dropdown_kontakt:hover .dropbtnKontakt {background-color: #3e8e41;}
.banner
{
height: 270px;
margin-left: 15%;
margin-right: 10%;
width: 68%;
background-color: white;
}
.mySlides {display:none;}
.info h1, h5, h3
{
font-family: 'Tangerine';
font-size: 78px;
text-shadow: 10px 10px 10px #aaa
}
.info
{
background-color: #a6debb;
margin-top: -4%;
margin-left: 15%;
margin-right: 10%;
width: 68%;
font-family: 'Helvetica', serif;
font-size: 40px;
text-shadow: 22px 22px 22px #aaa;
}
.info p
{
padding-left: 10px;
font-family: 'Helvetica', serif;
font-size: 25px;
text-shadow: 22px 22px 22px #aaa;
}
table
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th
{
border: 1px solid #9a1838 ;
text-align: left;
padding: 8px;
}
tr:nth-child(even)
{
background-color: #dddddd;
}
#map
{
margin-left: 9%;
width: 80%;
height: 400px;
background-color: grey;
}
Please, can you help me with this? And I also have a display different depending on the browser ( Firefox vs chrome).

Based on your question it seems you want to build a mobile navigation menu that opens when clicking the symbol "=".
You need to do the following:
- HTML: Add a list within an unordered list, to hold the anchor links. This is the navigation text you will see when it is expanded. Attach an onclick functionality that will be used in below javascript.
- CSS: Style your navigation menu.
- Javascript: Create a function that reacts on the HTML onclick. This function will expand your navigation menu. Your function should be able to toggle the menu, meaning that same button should be able to open/close the menu.
...if your need further assistance please create a code snippet.

My website is responsive but it doesnt react at the right sizes

So i made a responsive website but the website doesnt change when it should.
The website that i link below this shows that on my Iphone 6 Plus it should be formatted correctly but when i check the website on my iphone its in tablet view mode.
And you can check what i mean here http://quirktools.com/screenfly/#u=http%3A//maartennauta.com&w=1024&h=600&s=1
the CSS code
html * {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
margin-left: auto;
margin-right: auto;
}
header {
padding-bottom: 1px;
}
footer {
text-align: center;
}
.logo {
border-radius: 10px;
height: 100px;
margin-top: 15px;
margin-bottom: 5px;
width: 178px;
margin-left: auto;
margin-right: auto;
display: block;
}
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle;
}
.style-nav ul {
list-style-type: none;
text-align: center;
}
.style-nav ul li a {
text-decoration: none;
color: #2F322A;
text-align: center;
display: block;
text-transform: uppercase;
padding: 8px;
}
.style-nav ul li a:hover {
color: black;
text-shadow: 2px 2px 10px #000000;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.hero {
background-image: url(../Images/Background.jpg);
background-size: cover;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 50px;
color: #FFFFFF;
text-align: center;
}
.infobox-tan {
background-color: #C29D73;
color: #FFFFFF;
padding: 30px 20px 60px;
text-align: center;
}
.infobox-grey {
background-color: #717A84;
color: #FFFFFF;
padding: 30px 20px 60px;
text-align: center;
}
.row:before,
.row:after {
content: "";
display: table;
color: #FFFFFF;
text-align: center;
}
h1.small {
font-size: 30px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}
h2 {
font-size: 25px;
text-transform: uppercase;
font-weight: 100;
margin-bottom: 20px;
padding: 30px
}
h3 {
font-size: 16px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}
h4 {
font-size: 16px;
font-weight: 200;
margin-bottom: 35px;
}
p {
font-size: 15px;
text-transform: none;
font-weight: 20;
margin-bottom: 60px;
}
p.footertext {
color: gray;
font-size: 15px;
text-transform: none;
font-weight: 20;
margin-top: 20px;
margin-bottom: 20px;
}
.button {
border-radius: 30px;
border: 2px #FFFFFF solid;
padding: 8px 15px;
color: #FFFFFF;
text-decoration: none;
margin-bottom: 30px;
}
.button:hover {
color: #242424;
border: 2px #242424 solid;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.row:after {
clear: both;
}
.col {
width: 100%;
}
/*Tablet View*/
#media (min-width: 700px) {
.style-logo {
float: center;
}
body {
max-width: 778px;
}
.style-nav ul li {
display: inline-block;
}
h1.normal {
font-size: 57px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}
.row:before,
.row:after {
content: "";
display: table;
padding: 5px;
color: #FFFFFF;
text-align: center;
}
.col-tablet {
width: 50%;
}
.col {
float: left;
padding-bottom: 14px;
padding-left: 7px;
padding-right: 7px;
}
}
/*Desktop View*/
#media (min-width: 1024px) {
.style-logo {
float: center;
}
.style-nav {
float: center;
}
.col-desktop {
width: 25%;
}
body {
max-width: 1200px;
}
}
<!doctype html>
<html>
<head>
<link href="CSS/Styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<header>
<div class="row">
<div class="col">
<img class="logo" src="Images/Logo company.png" alt="Logo">
<nav class="style-nav">
<ul>
<li>Education</li>
<li>Photos</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<div class="row">
<div class="col">
<div class="hero">
<h3>Editor's Choice</h3>
<h4>Maarten Nauta</h4>
<h1 class="normal small">Webdesign</h1>
Read More
</div>
</div>
</div>
<div class="row">
<div class="col col-tablet">
<div class="infobox-tan">
<h2>Education</h2>
<p>And a summary of my achievements</p>
Read More
</div>
</div>
<div class="col col-tablet">
<div class="infobox-grey">
<h2>Services</h2>
<p>Graphic/Web design - Video/Photo editing</p>
Read More
</div>
</div>
</div>
<div class="row">
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-1.jpeg.jpg" alt="1"></div>
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-2.jpeg.jpg" alt="2"></div>
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-3.jpeg.jpg" alt="3"></div>
<div class="col col-tablet col-desktop"><img src="Images/Stock-img-4.jpeg.jpg" alt="4"></div>
</div>
</main>
<footer>
<div class="row">
<div class="col">
<p class="footertext">©2018 Maarten Nauta</p>
</div>
</div>
</footer>
</body>
</html>

Your iPhone has more pixels per inch than a standard desktop screen, and is in fact >700 pixels wide. In order to get a webpage to treat pixels as a unit of screen screen size you need a meta viewport tag
<meta name="viewport" content="width=device-width, initial-scale=1">
With this tag your media queries will operate as though the screen is the standard 72 ppi.

You are missing the viewport meta tag
(...) Apple introduced the "viewport meta tag" in Safari iOS to let
web developers control the viewport's size and scale. Many other
mobile browsers now support this tag, although it is not part of any
web standard. Apple's documentation does a good job explaining how web
developers can use this tag, but we had to do some detective work to
figure out exactly how to implement it in Fennec. For example,
Safari's documentation says the content is a "comma-delimited list,"
but existing browsers and web pages use any mix of commas, semicolons,
and spaces as separators.
<meta name="viewport" content="width=device-width, initial-scale=1">

website layout going crazy when I zoom out and in

idk why but when I zoom out of my website, the code seems to fall apart and the whole thing just looks disgusting. I've checked out other answers to this question but NONE of the solutions really tailor towards MY code.
body {
background-image: url(gradient.png);
background-repeat: no-repeat`enter code here`;
}
h1.heading {
color: #046289;
font-size: 50px;
margin-top: 100px;
text-align: center;
font-family: 'Poppins', sans-serif;
}
p.heading {
color: #046289;
font-family: 'Poppins', sans-serif;
font-size: 20.8px;
font-weight: 600;
position: relative;
margin-left: 70px;
top: 60px;
}
p.heading1 {
color: #046289;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: relative;
margin-left: 70px;
top: 50px;
}
img.aml {
width: 280px;
height: 280px;
position: absolute;
margin-left: 360px;
bottom: 30px;
}
iframe.livevid {
position: absolute;
margin-left: 840px;
}
p.vid {
color: #046289;
font-family: 'Poppins', sans-serif;
font-size: 20.8px;
font-weight: 600;
position: absolute;
margin-left: 840px;
top: 307px;
}
p.vid1 {
color: #046289;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: absolute;
margin-left: 840px;
top: 353px;
}
a {
text-decoration: none;
}
p a:link {
color: #4204a5;
}
p a:visited {
color: #4204a5;
}
p a:hover {
color: #71a3f2;
}
/*
BELOW - NAVIGATION BAR
*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
li {
float: left;
}
.spacefornav {
margin-left: 462px;
}
li a:hover {
color: #71a3f2;
}
div.nav {
color: #046289;
}
li a {
display: inline-block;
color: #046289;
text-align: center;
padding: 8px 10px;
text-decoration: none;
font-family: 'Poppins';
sans-serif;
margin: 0px 20px;
font-weight: 500;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Childish Gambino</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&subset=devanagari,latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<h1 class="heading">CHILDISH GAMBINO</h1>
<ul>
<div class="nav">
<li class="spacefornav">Home</li>
<li>About</li>
<li>Music</li>
<li>Contact</li>
</div>
</ul>
<p class="heading">"AWAKEN MY LOVE!"</p>
<p class="heading1">
Childish Gambino's latest
<br> and freshest album is
<br> AVAILABLE NOW on iTunes,
<br>
Spotify and Google Play Music
</p>
<img src="images/awakenmylove.jpg" class="aml" title="'Awaken My Love!' album art">
<<iframe width="280" height="158" src="https://www.youtube.com/embed/6v7W513Wj3g?rel=0" frameborder="0" allowfullscreen class=livevid></iframe>
<p class="vid">Watch Now!</p>
<p class="vid1">Childish Gambino performing '3005'<br>live at Splendor In The Grass!</p>
</body>
</html>

If you use some inline DIV's that fit exactly into other DIV's this problem can happen. When zooming in/out pixels are being divided. If you give the DIV's one extra pixel of space it's fixed.

Responsive media query is not working

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>