Why is my content area stopping before my footer? - html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<!--<meta name="viewport" content="width=960">
<meta name="viewport" content="width=480">-->
<title>Habitat for Humanity Restore | Home</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<div class="headimg">
<h2 class="slogan1">HOME IMPROVEMENT & FURNITURE OUTLET</h2>
<h3 class="slogan2"> A clean, happy place to find treasures</h3>
</div>
</header>
<!--
<div class="socialmedia"><img src="images/facebook-14.png" width="40" height="52" alt="FacebookSM">
<img src="images/Pinterest-icon.png" width="40" height="52" alt="PinterestLogo">
<img src="images/twitter-icon.png" width="40" height="52" alt="TwitterLogo"></div>
-->
</div>
<div id="nav">
<ul>
<li>SHOP</li>
<li>DONATE</li>
<li>VOLUNTEER</li>
<li>CONTACT US</li>
</ul>
</div>
<!-- Tony please fix text shadows, sidebar shadows and nagivation effects -->
<div id="sidebarleft">
<ul class="sidebartextleft">
<li class="pleftsidebar">ABOUT US</li>
<li class="pleftsidebar">REPURPOSED </li>
<li class="pleftsidebar">DONATE</li>
<li class="pleftsidebar">VOLUNTEER</li>
<li class="pleftsidebar">UNITED WAY </li>
<li class="pleftsidebar">NEWSLETTER</li>
<li class="pleftsidebar">EMAIL US</li>
<li class="pleftsidebar">SEND US PHOTOS</li>
<li class="pleftsidebar">MAP TO RESTORE</li>
<li class="pleftsidebar">DIRECTIONS</li>
</ul>
<!--<p>CONTACT US </p>-->
<div class="sidebartextleftsmall">
Restore Facility<br/>
200 South Larkin<br/>
Joliet, IL. 60436<br/>
P: 815-714-7100<br/>
E: info#restorejoliet.org
</div>
</div>
<!--</div>-->
<div id="sidebarright">
<div class="sidebartextright">
<p>FEATURED THIS WEEK:</p>
</div>
<div class="rightsidebarimg">
<div class="featuredimg">
<img src="images/furniture for sale.jpg" width="265" height="457" alt="furniture for sale">
</div>
</div>
<div class="sidebartextrightsmall"><span>Save our contact info to your smartphone</span>
<img src="images/scancode.jpg" width="125" height="126" alt="Habitat Restore Contact Information Smartphone Code">
</div>
</div>
<div id="content">
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="images/restorelocationtext.png" alt="Will County Habitat For Restore Location">
</figure>
<figure>
<img src="images/slider2.jpg" alt="Worker setting up bookshelf">
</figure>
<figure>
<img src="images/slider3.jpg" alt="Warehouse selection">
</figure>
<figure>
<img src="images/slider4.JPG" alt="More Ware Selection Tables and fans">
</figure>
<figure>
<img src="images/slider5.JPG" alt="Household furniture warehouse selection">
</figure>
</figure>
</div>
<div id="box">
<img src="images/habitatBox1.png" alt="Shop for repurposed materials" class="center" />
<img src="images/habitatBox2.png" alt="Donate Heart" class="center" />
<img src="images/habitatBox3.png" alt="Shop for repurposed materials" class="center" />
</div>
</div>
<div id="sidebarbottom">
<ul class="sidebartextleft">
<li class="pleftsidebar">ABOUT US</li>
<li class="pleftsidebar">REPURPOSED</li>
<li class="pleftsidebar">DONATE</li>
<li class="pleftsidebar">VOLUNTEER</li>
<li class="pleftsidebar">UNITED WAY</li>
<li class="pleftsidebar">NEWSLETTER</li>
<li class="pleftsidebar">EMAIL US</li>
<li class="pleftsidebar">SEND US PHOTOS</li>
<li class="pleftsidebar">MAP TO RESTORE</li>
<li class="pleftsidebar">DIRECTIONS</li>
</ul>
</div>
<div id="footer">2015 Will County Habitat for Humanity ReStore. All Rights Reserved.</div>
</div>
</body>
</html>
I'm having an issue in which my content section suddenly stops before reaching the footer causing a black underlay to show up, I've looked into editing the wrapper size and height of the content container but cannot figure out what the issue may be, please help me out
This below image is what the page is complete page should look like
CSS
#media only screen and (min-width: 960px) {
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
height: 106px;
background-color: #d9e6ef;
}
#wrapper {
width: 100%;
}
#nav {
height: 52px;
background-color: #51b948;
}
#nav ul {
padding: 7px;
text-align: center;
font-size: 24px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#nav ul li {
display: inline-block;
list-style-type: none;
margin: 0 15px;
}
#nav ul li a {
display: inline-block;
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color: #F4E9E9;
text-decoration: none;
background-color: #406718;
padding: 5px;
border: thin solid #030303;
width: 170px;
}
.socialmedia {
float: right;
margin-right: 45px;
padding: 8px 8px 0;
}
a {
text-decoration: none;
}
a:visited {
color:#FFF !important;
}
#sidebarleft {
float: left;
width: 20%;
height: 784px;
background-color: #005596;
}
#sidebarright {
float: right;
width: 20%;
height: 784px;
background-color: #005596;
}
#sidebarbottom {
display: none;
}
.sidebartextleft {
font-family: Arial, Helvetica, sans-serif;
padding-top: 30px;
margin-left: 25px;
font-size: 20px;
color: #FFF;
font-weight: bolder;
height: 368px;
font-style: normal;
}
.sidebartextright {
position: relative;
font-family: Arial, Helvetica, sans-serif;
padding: 15px 0 20px 5px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 20px;
height: 30px;
font-style: normal;
}
.sidebartextlefthead {
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 22px;
padding-bottom: 20px;
font-weight: bold;
}
.pleftsidebar {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #d5b89a;
padding-top: 4px;
padding-bottom: 3px;
width: 80%
}
#content {
width: 60%;
height: 768px;
float: left;
}
#footer {
width: 100%;
padding-top: 10px;
bottom: 0;
text-align: center;
background-color: #dbf1da;
font-weight: bold;
color: #000;
}
.rightsidebarimg {
text-align: center;
padding: 0 15px;
}
.sidebartextrightsmall {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
font-size: 20px;
width: 90%;
height: 200px;
font-style: normal;
margin: 60px auto 0;
}
.sidebartextrightsmall span {
display: block;
padding-bottom: 20px;
}
.sidebartextrightsmall img {
max-width: 125px;
height: auto;
text-align: center;
}
.sidebartextleftsmall {
margin: 200px 1px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #c7b199;
font-size: 17px;
font-weight: normal;
width: 100%;
height: auto;
font-style: normal;
}
.featuredimg img {
width: 100%;
height: auto;
}
#box {
text-align: center;
}
img.center {
display: inline-block;
width: 30%;
padding: 0 8px;
}
.headimg {
height: 106px;
margin-left: 100px;
display: inline-block;
background: url(images/head.png) no-repeat;
}
h2.slogan1 {
padding: 53px 0 0 220px ;
font-weight: bold;
font-size: 24px;
}
h3.slogan2 {
padding-left: 220px ;
font-style: italic;
font-weight: bold;
font-size: 20px;
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0;
background: #101010;
}
div#captioned-gallery {
width: 90%;
overflow: hidden;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
margin: 40px auto;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
padding: .6rem;
}
/* Bracket below closes desktop media query */
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
height: 106px;
background-color: #d9e6ef;
}
#wrapper {
width: 100%;
}
#header {
height: 106px;
background-color: #d9e6ef;
}
#nav {
height: 52px;
background-color: #51b948;
}
#nav ul {
padding: 9px;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#nav ul li {
display: inline-block;
list-style-type: none;
margin: 0 15px;
}
#nav ul li a {
display: inline-block;
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color: #F4E9E9;
text-decoration: none;
background-color: #406718;
padding: 5px;
border: thin solid #030303;
width: 140px;
}
.socialmedia {
float: right;
margin-right: 45px;
padding: 8px 8px 0;
}
#sidebarleft {
float: left;
width: 25%;
height: 784px;
background-color: #005596;
}
#sidebarright {
display: none;
}
#sidebarbottom {
display: none;
}
.sidebartextleft {
font-family: Arial, Helvetica, sans-serif;
padding-top: 30px;
margin-left: 25px;
font-size: 20px;
color: #FFF;
font-weight: bolder;
height: 368px;
font-style: normal;
}
.sidebartextright {
position: relative;
font-family: Arial, Helvetica, sans-serif;
padding: 15px 0 20px 5px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 20px;
height: 30px;
font-style: normal;
}
.sidebartextlefthead {
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 22px;
padding-bottom: 20px;
font-weight: bold;
}
.pleftsidebar {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #d5b89a;
padding-top: 4px;
padding-bottom: 3px;
width: 80%
}
#content {
width: 75%;
height: 768px;
float: left;
}
#footer {
width: 100%;
padding-top: 10px;
bottom: 0;
text-align: center;
background-color: #dbf1da;
font-weight: bold;
color: #000;
}
.rightsidebarimg {
text-align: center;
padding: 0 15px;
}
.sidebartextrightsmall {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
font-size: 20px;
width: 90%;
height: 200px;
font-style: normal;
margin: 60px auto 0;
}
.sidebartextrightsmall span {
display: block;
padding-bottom: 20px;
}
.sidebartextrightsmall img {
max-width: 125px;
height: auto;
text-align: center;
}
.sidebartextleftsmall {
margin: 200px 1px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #c7b199;
font-size: 17px;
font-weight: normal;
width: 100%;
height: auto;
font-style: normal;
}
.featuredimg img {
width: 100%;
height: auto;
}
#box {
text-align: center;
}
img.center {
display: inline-block;
width: 30%;
padding: 0 8px;
}
.headimg {
height: 106px;
margin-left: 40px;
background: url(images/head.png) no-repeat;
}
h2.slogan1 {
padding: 53px 0 0 220px ;
font-weight: bold;
font-size: 22px;
}
h3.slogan2 {
padding-left: 220px ;
font-style: italic;
font-weight: bold;
font-size: 18px;
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0;
background: #101010;
}
div#captioned-gallery {
width: 90%;
overflow: hidden;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
margin: 40px auto;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
padding: .6rem;
}
/* Bracket below closes tablet media query */
}
#media only screen and (min-width: 320px) and (max-width: 767px) {
* {
padding: 0px;
margin: 0px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
header {
height: 106px;
background-color: #d9e6ef;
}
#wrapper {
width: 100%;
}
#nav {
background-color: #51b948;
}
#nav ul {
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
#nav ul li {
display: block;
list-style-type: none;
border-bottom: 2px dotted white;
}
#nav ul li:last-child {
border-bottom: none;
}
#nav ul li a {
display: block;
text-align: center;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
color: #F4E9E9;
padding: 20px;
}
#nav ul li a:link {
text-decoration: none;
}
#nav ul li a:visited {
color: #F4E9E9;
}
#nav ul li a:hover {
background: #51b948;
}
#nav ul li a:active {
background: #406718;
}
.socialmedia {
float: right;
margin-right: 45px;
padding: 8px 8px 0;
}
#sidebarleft {
display: none;
float: left;
width: 25%;
height: 784px;
background: #005596;
}
#sidebarright {
display: none;
}
#sidebarbottom {
width: 100%;
background: #005596;
text-align: center;
}
#sidebarbottom ul li a {
display: block;
padding: 15px;
border-bottom: 3px solid #fff;
}
#sidebarbottom ul li a:link {
text-decoration: none;
}
#sidebarbottom ul li a:visited {
color: #fff;
}
#sidebarbottom ul li a:hover {
background: #005596;
}
#sidebarbottom ul li a:active {
background: #d9e6ef;
}
.sidebartextleft {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFF;
font-weight: bolder;
font-style: normal;
}
.sidebartextright {
position: relative;
font-family: Arial, Helvetica, sans-serif;
padding: 15px 0 20px 5px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 20px;
height: 30px;
font-style: normal;
}
.sidebartextlefthead {
font-family: Arial, Helvetica, sans-serif;
font-style: bold;
font-size: 22px;
padding-bottom: 20px;
font-weight: bold;
}
#content {
width: 100%;
background: #dbf1da;
padding: 0;
margin: 0;
}
#footer {
width: 100%;
padding-top: 10px;
bottom: 0;
text-align: center;
background-color: #dbf1da;
font-weight: bold;
color: #000;
}
.rightsidebarimg {
text-align: center;
padding: 0 15px;
}
.sidebartextrightsmall {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
font-size: 20px;
width: 90%;
height: 200px;
font-style: normal;
margin: 60px auto 0;
}
.sidebartextrightsmall span {
display: block;
padding-bottom: 20px;
}
.sidebartextrightsmall img {
max-width: 125px;
height: auto;
text-align: center;
}
.sidebartextleftsmall {
margin: 200px 1px 0;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: #c7b199;
font-size: 17px;
font-weight: normal;
width: 100%;
height: auto;
font-style: normal;
}
.featuredimg img {
width: 100%;
height: auto;
}
#box {
text-align: center;
}
img.center {
display: inline-block;
width: 33%;
margin: 0;
background: #42603C;
}
img.center:first-child {
float: left;
}
img.center:last-child {
float: right;
}
.headimg {
height: 106px;
margin: 0 auto;
padding: 0 auto;
text-align: center;
background: url(images/head.png) no-repeat center;
}
h2.slogan1 {
display: none;
/*
padding: 35px 0 0 220px ;
font-weight: bold;
font-size: 20px;
*/
}
h3.slogan2 {
display: none;
/*
padding-left: 220px ;
font-style: italic;
font-weight: bold;
font-size: 16px;
*/
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0;
background: #101010;
}
div#captioned-gallery {
width: 100%;
overflow: hidden;
margin: 0 auto;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
padding: .6rem;
}
/* Bracket below closes phone media query */
}

You are closing one div more then you open div (tags). Count them and then look, which div should close at which point. You could for example search for all div> to get all open and closing div tags. One tip: take a look at the sourcecode in the browser, at least Firefox highlights wrong html syntax (too manny or to few tags or not matching tags) which makes it easy to find them.
Edit:
You close your content div after this div <div id="box">....</div>

Related

how to fix css height auto property not working

I am now working on a website for my discord bot i have 2 container in my website (container and container2) i set my height of my container and container2 to auto but there is a problem my container 2 height will work on mobile device (ie, css breakpoint with 600px) but now working on devices with breakpoint of 1024px the container is small in devices with 1024 breakpoints
my style.css
* {
margin: 0;
padding: 0;
}
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#700&family=Quicksand:wght#600&display=swap");
#import url("https://fonts.googleapis.com/css?family=Archivo:400,700");
#import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");
#import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");
#import url("https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&display=swap");
/*Desktop*/
:root{
--normal: linear-gradient(315deg, #90d5ec 0%, #fc575e 74%);
--darks: linear-gradient(315deg, #000106 0%, #000106 74%);
--text-theme: black;
}
.dark-theme{
--normal: linear-gradient(315deg, #000106 0%, #000106 74%);
--text-theme: white;
}
#media screen and (min-width: 1024px) and (max-width: 1300px) {
.container {
height: auto;
width: 100%;
background-image: var(--normal);
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}
.title {
font-family: "Quicksand", sans-serif;
font-size: 72px;
color: var(--text-theme);
position: relative;
top: 200px;
margin-left: 200px;
user-select: none;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: black;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #0087ca;
text-align: center;
font-family: "Nunito", sans-serif;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
color: #0087ca;
}
.title .img {
width: 400px;
height: 400px;
left: 600px;
bottom: 250px;
position: relative;
display: none;
}
.infotit {
font-size: 10px;
color: var(--text-theme);
}
.hover-underline-animation a {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation a:after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
height: 6px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation a:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.trust {
font-size: 26px;
font-family: "Quicksand", sans-serif;
position: relative;
color: var(--text-theme);
text-align: center;
}
.info .quote {
font-size: 36px;
font-family: "Quicksand", sans-serif;
position: relative;
text-align: center;
bottom: 100px;
color: var(--text-theme);
}
.info .btn {
text-align: center;
position: relative;
}
.info .quoto {
text-align: center;
font-family: "Quicksand", sans-serif;
font-size: 36px;
bottom: 50px;
position: relative;
color: var(--text-theme);
}
.info .h11 {
text-align: center;
position: relative;
bottom: 20px;
font-family: "Quicksand", sans-serif;
font-size: 20px;
color: var(--text-theme);
}
.info .h11 .h33 {
color: red;
}
.info .h11 .muchmore_txt {
color: red;
}
.f_txt {
font-size: 26px;
color: var(--text-theme);
}
.more_txt {
font-size: 26px;
color: var(--text-theme);
}
.footer {
font-family: "Quicksand", sans-serif;
text-align: center;
background-color: gray;
height: 100px;
}
/*MORE CONTENTS*/
.container2 {
width: 100%;
height: 4500px;
background-color: rgba(39, 41, 52, 255);
}
.title2 {
font-size: 10px;
font-family: "Quicksand", sans-serif;
color: white;
text-align: center;
border-style: groove;
}
.hideme {
opacity: 0;
}
.minecraft {
float: right;
margin-top: 10%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.mcimg {
width: 605px;
height: 300px;
border-color: red;
}
.mcpara {
font-size: 15px;
}
.joke {
float: left;
margin-top: 40%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.jokeimg {
width: 805px;
height: 300px;
}
.jokepara {
font-size: 15px;
}
.roast {
float: right;
margin-top: 40%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.roastimg {
width: 705px;
height: 300px;
}
.roastpara {
font-size: 15px;
}
.animegif {
float: left;
margin-top: 40%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.animeimg {
width: 605px;
height: 300px;
}
.animapara {
font-size: 15px;
}
.meme {
float: right;
margin-top: 40%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.memeimg {
width: 705px;
height: 400px;
}
.memepara {
font-size: 15px;
}
.fact {
margin-top: 40%;
float: left;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.factimg {
width: 705px;
height: 200px;
}
.factpara {
font-size: 15px;
}
}
.anime {
font-size: 5vw;
cursor: cell;
line-height: 5.5vw;
}
#icon{
cursor: pointer;
width: 20px;
float: right;
margin-top: 10px;
margin-right: 10px;
}
.anime {
transition: color 3s;
transition-delay: 1s;
letter-spacing: -0.2vw;
}
.anime span:hover {
transition: color 0s;
}
.anime span:nth-child(1n):hover {
color: #9875e0;
}
.anime span:nth-child(2n):hover {
color: #53fbdd;
}
.anime span:nth-child(3n):hover {
color: #00a4dd;
}
.hideme {
opacity: 0;
}
/*Mobile*/
#media screen and (max-width: 600px) {
.container {
height: auto;
width: 100%;
background-image: var(--normal);
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}
.title {
font-family: "Quicksand", sans-serif;
font-size: 72px;
color: var(--text-theme);
position: relative;
top: 200px;
margin-left: 200px;
user-select: none;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: black;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #0087ca;
text-align: center;
font-family: "Nunito", sans-serif;
padding: 10px 12px;
text-decoration: none;
font-size: 15px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
color: #0087ca;
}
.title .img {
width: 400px;
height: 400px;
left: 600px;
bottom: 250px;
position: relative;
}
.infotit {
font-size: 10px;
color: var(--text-theme);
}
.hover-underline-animation a {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation a:after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
height: 6px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation a:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.title .img {
display: none;
}
.title {
font-size: 42px;
position: relative;
right: 95px;
top: 100px;
text-align: center;
color: var(--text-theme);
}
.trust {
font-size: 16px;
font-family: "Quicksand", sans-serif;
position: relative;
top: 180px;
text-align: center;
color: var(--text-theme);
}
.info .quote {
font-size: 26px;
font-family: "Quicksand", sans-serif;
position: relative;
text-align: center;
color: var(--text-theme);
}
.info .btn {
text-align: center;
position: relative;
}
.info .quoto {
text-align: center;
font-family: "Quicksand", sans-serif;
font-size: 26px;
color: var(--text-theme);
}
.info .h11 {
text-align: center;
position: relative;
top: 20px;
font-family: "Quicksand", sans-serif;
font-size: 20px;
color: var(--text-theme);
}
.info .h11 .h33 {
color: red;
}
.info .h11 .muchmore_txt {
color: red;
font-size: 17px;
}
.footer {
font-family: "Quicksand", sans-serif;
text-align: center;
background-color: gray;
height: 100px;
}
.anime {
font-size: 8vw;
cursor: cell;
line-height: 5.5vw;
}
/*MORE CONTENTS*/
.container2 {
width: 100%;
height: auto;
background-color: rgba(39, 41, 52, 255);
}
.title2 {
font-size: 10px;
font-family: "Quicksand", sans-serif;
color: white;
text-align: center;
border-style: groove;
}
.hideme {
opacity: 0;
}
.minecraft {
margin-top: 10%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.mcimg {
width: 95%;
height: 80%;
border-color: red;
}
.mcpara {
font-size: 15px;
}
.joke {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.jokeimg {
width: 95%;
height: 80%;
}
.jokepara {
font-size: 15px;
}
.roast {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.roastimg {
width: 95%;
height: 80%;
}
.roastpara {
font-size: 15px;
}
.animegif {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.animeimg {
width: 95%;
height: 80%;
}
.animapara {
font-size: 15px;
}
.meme {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.memeimg {
width: 95%;
height: 80%;
}
.memepara {
font-size: 15px;
}
.fact {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.factimg {
width: 95%;
height: 80%;
}
.factpara {
font-size: 15px;
}
}
/*Tablets*/
#media screen and (min-width: 768px) and (max-width: 1023px) {
.container {
height: auto;
width: 100%;
background-image: var(--normal);
background-position: center;
background-size: cover;
padding-left: 5%;
padding-right: 5%;
box-sizing: border-box;
position: relative;
}
.title {
font-family: "Quicksand", sans-serif;
font-size: 72px;
color: black;
position: relative;
top: 200px;
margin-left: 200px;
user-select: none;
color: var(--text-theme);
}
/* Add a black background color to the top navigation */
.topnav {
background-color: black;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #0087ca;
text-align: center;
font-family: "Nunito", sans-serif;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
color: #0087ca;
}
.title .img {
width: 400px;
height: 400px;
left: 600px;
bottom: 250px;
position: relative;
}
.infotit {
font-size: 10px;
color: var(--text-theme);
}
.hover-underline-animation a {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation a:after {
content: "";
position: absolute;
width: 100%;
transform: scaleX(0);
height: 6px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation a:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.title .img {
display: none;
}
.title {
font-size: 42px;
position: relative;
right: 95px;
top: 100px;
text-align: center;
color: var(--text-theme);
}
.trust {
font-size: 16px;
font-family: "Quicksand", sans-serif;
position: relative;
top: 180px;
color: var(--text-theme);
text-align: center;
}
.info .quote {
font-size: 26px;
font-family: "Quicksand", sans-serif;
position: relative;
text-align: center;
color: var(--text-theme);
}
.info .btn {
text-align: center;
position: relative;
}
.info .quoto {
text-align: center;
font-family: "Quicksand", sans-serif;
font-size: 26px;
color: var(--text-theme);
}
.info .h11 {
text-align: center;
position: relative;
top: 20px;
font-family: "Quicksand", sans-serif;
font-size: 20px;
color: var(--text-theme);
}
.info .h11 .h33 {
color: red;
}
.info .h11 .muchmore_txt {
color: red;
}
.footer {
font-family: "Quicksand", sans-serif;
text-align: center;
background-color: gray;
height: 100px;
}
.anime {
font-size: 8vw;
cursor: cell;
line-height: 5.5vw;
}
/*MORE CONTENTS*/
.container2 {
width: 100%;
height: auto;
background-color: rgba(39, 41, 52, 255);
}
.title2 {
font-size: 10px;
font-family: "Quicksand", sans-serif;
color: white;
text-align: center;
border-style: groove;
}
.hideme {
opacity: 0;
}
.minecraft {
margin-top: 10%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.mcimg {
width: 95%;
height: 80%;
border-color: red;
}
.mcpara {
font-size: 15px;
}
.joke {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.jokeimg {
width: 95%;
height: 80%;
}
.jokepara {
font-size: 15px;
}
.roast {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.roastimg {
width: 95%;
height: 80%;
}
.roastpara {
font-size: 15px;
}
.animegif {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.animeimg {
width: 95%;
height: 80%;
}
.animapara {
font-size: 15px;
}
.meme {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.memeimg {
width: 95%;
height: 80%;
}
.memepara {
font-size: 15px;
}
.fact {
margin-top: 30%;
text-align: center;
font-size: 26px;
color: white;
font-family: "Nunito", sans-serif;
}
.factimg {
width: 95%;
height: 80%;
}
.factpara {
font-size: 15px;
}
}
dont read the whole style.css just check the one with breakpoint of 1024
my index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="btn.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1592285788506158"
crossorigin="anonymous"></script>
<meta name="author" content="CaptainBeast#1394">
<meta name="description" content="Beast Bot.beast bot is a moderation and fun bot for your discord server make your discord server a fun and safe place">
<meta name="keywords" content="Discord bot, bot,beast bot,server,discord server">
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="google-site-verification" content="VbhoNStFz2rn8d52JV_RzL_0uAG7thWedllzb16m-wA" />
<link rel="icon" href="images/kisspng-portable-network-graphics-computer-icons-transpare-braingoodgames-5c9d9c5093e378.8617067815538330406058.png" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
</script>
<div class="topnav">
<div class="hover-underline-animation">
<a class="active" href="index.html">Home</a>
Contact
About Us
Status
<img src="images/moon.png" id="icon">
</div>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Beast Bot</title>
</head>
<body>
<div class="container">
<div class="title">
<p class="infotit">Hover the title</p>
<P class="anime"><span>Beast Bot :)</span></P>
<div class="hideme">
<img class="img" src="images/kisspng-portable-network-graphics-computer-icons-transpare-braingoodgames-5c9d9c5093e378.8617067815538330406058.png">
</div>
</div>
<div class="hide me">
<h1 class="trust">Trusted by 10,000+ people</h1>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="hideme">
<div class="info">
<div class="hideme">
<p class="quote">A perfect moderation and fun bot<br>for your Discord Server</p>
</div>
<div class="btn">
<button onclick="location.href='https://discord.com/api/oauth2/authorize?client_id=876824416531664896&permissions=536870907895&scope=bot'" class="bttn-slant bttn-lg bttn-royal">Invite</button>
</div>
<br>
<BR>
<br>
<p class="quoto">Beast Bot is trusted by more than 10,000 people</p>
<div class="h11">
<h1>Features</h1>
<br>
<h3 class="h33">Moderation</h3>
<img src="images/features.png" class="features_img">
<p class="f_txt">A perfect moderation bot for your discord server with commands like ban,kick,mute,lock</p>
<br>
<br>
<h3 class="muchmore_txt">Much More</h3>
<img src="images/muchmore.png" class="muchmore">
<P class="more_txt">Many more fun and anime commands like animegif,meme,cute and many more</P>
</div>
</div>
</div>
<br>
<br>
</div>
<!--Updates-->
<div class="container2">
<div class="hideme">
<div class="title2">
<h1>The bot that makes your server a safe place</h1>
</div>
</div>
<div class="minecraft">
<p class="hideme" >Get status of any minecraft servers</p>
<div class="hideme">
<img class="mcimg" src="images/mcstats.PNG">
<div class="mcpara">
<p class="hideme">Beast bot gives you the ability to know the status of any minecraft server</p>
</div>
</div>
</div>
<div class="joke">
<p class="hideme">Have a nice laugh everyday</p>
<div class="hideme">
<img class="jokeimg" src="images/joke.PNG">
</div>
<div class="jokepara">
<p class="hideme">Have a good laugh every day with a Beast Bot use $joke for joke </p>
</div>
</div>
<div class="roast">
<p class="hideme">Roast your friends</p>
<div class="hideme">
<img class="roastimg" src="images/roast.PNG">
</div>
<div class="roastpara">
<p class="hideme">Hmm.Want a revenge on your firend do $roast #user to take a revenge on him</p>
</div>
</div>
<div class="animegif">
<p class="hideme">Sad anime gif</p>
<div class="hideme">
<img class="animeimg" src="https://media.tenor.com/images/8fef3aa41f9d27021e5f4105a7bd6768/tenor.gif">
</div>
<div class="animapara">
<P class="hideme">Sad :( emotional anime gif :( do $animegif</P>
</div>
</div>
<div class="meme">
<p class="hideme">Memes</p>
<div class="hideme">
<img class="memeimg" src="images/meme.jpeg">
</div>
<div class="memepara">
<P class="hideme">Cool memes for your discord server</P>
</div>
</div>
<div class="fact">
<p class="hideme">Random Facts</p>
<div class="hideme">
<img class="factimg" src="images/fact.PNG">
</div>
<div class="factpara">
<p class="hideme">Some cool random fact for you do $fact</p>
</div>
</div>
</div>
<script src="script.js"></script>
<script>
var icon = document.getElementById("icon");
icon.onclick = function(){
document.body.classList.toggle("dark-theme");
if(document.body.classList.contains("dark-theme")){
icon.src = "images/sun.png";
}else{
icon.src = "images/moon.png"
}
}
</script>
</body>
<script src="cookies.js"></script>
<div class="footer">
<br>
<br>
<footer><P><i class="fa fa-github" ></i> <i class="fa fa-copyright"></i> CaptainBeast#1394 - 2021</P></footer>
Join our official server
</div>
</html>
Here is a image of the problem - container2 is the thing with the text "The bot that makes your server a safe place"

image becomes large after adding a float/clear property to it?

I am trying to make a bottom sidebar with social media icons using float and clear properties. All of the icons are floated left, except for the twitter icon which is clearright. Why is the icon for twitter larger than the other icons? However, it is the same size when it's floated left.
I'd like for it to be the same size as the other icons and stay in that far right corner position. Or at least be centered without a lot of space in between the icons... How do I fix this? What am I doing wrong?
#import url('https://fonts.googleapis.com/css?family=Open+Sans|Poppins');
html {
font-size: 1em;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
}
/*logo*/
#logo {
float: left;
width: 5.5em;
background-color: white;
position: relative;
top: -2em;
}
/*pagewrapper*/
.pageWrapper {
width: 1000px;
margin: 0 auto;
padding: 2em;
margin-top: 1.5em;
margin-bottom: 1.5em;
border-style: double;
border-width: thick;
border-color: #7BDFF2;
overflow: auto;
}
/*menu*/
#nav_menu ul {
list-style-type: none;
}
#nav_menu ul li {
float: left;
margin-left: 6em;
margin-right: 4em;
}
#nav_menu li a {
text-align: center;
display: block;
width: 9em;
padding: .9em 0;
text-decoration: none;
background-color: #7BDFF2;
color: #eff7f6;
font-weight: bold;
border-radius: 1em;
}
#nav_menu li a:hover {
color: #f7d6e0;
}
#nav_menu li a:active {
color: #b2f7ef;
}
a {
text-transform: uppercase;
font-weight: bold;
color: #f2b5d4;
}
a:active {
color: #ffcdee;
}
a:hover {
color: #eff7f6;
}
/*copyright*/
footer {
text-align: center;
font-weight: 100;
font-size: .7em;
}
/* aside */
#socialmedia {
width: 80%;
margin: 0 auto;
margin-top: 2em;
}
#socialmedia h3 {
text-transform: lowercase;
color: #fff;
margin: 0 auto;
background-color: #f2b5d4;
letter-spacing: .9em;
font-size: .8em;
width: 100%;
height: 100%;
border-style: dotted;
border-color: #eff7f6;
text-align: center;
border-width: thin;
}
#socialmedia img {
width: 10%;
height: auto;
}
/*youtube embed video*/
.video iframe,
.video object,
.video embed {
display: block;
margin: 0 auto;
top: 0;
left: 0;
padding-top: 1em;
clear: both;
}
h1 {
font-weight: bold;
text-align: center;
font-size: 2em;
position: relative;
right: .5em;
bottom: -2em;
}
h2 {
font-weight: 200;
text-align: left;
}
.member {
margin-top: 3em;
}
.p album {
margin-top: .3em;
}
/*albums*/
.album {
border: dotted #000 .2em;
border-radius: .5em;
width: 20em;
min-height: 20em;
font-size: 1em;
margin-top: 5em;
margin: 1em;
padding: 1em;
}
#album img {
height: auto;
max-width: 100%;
}
/*floats and clears*/
.left {
float: left;
}
.right {
float: right;
}
.clearleft {
clear: left;
}
.clearright {
clear: right;
}
.clearboth {
clear: both;
}
<aside id="socialmedia">
<h3>social media</h3>
<div class="ig left">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2016/240/iconmonstr-instagram-13.png" alt="instagram logo">
</div>
<div class="fb left">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-facebook-3.png" alt="facebook logo">
</div>
<div class="yt left">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2013/240/iconmonstr-youtube-8.png" alt="youtube logo">
</div>
<div class="twt clearright">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-twitter-3.png" alt="twitter logo">
</div>
</aside>
You can make them 10% wide with 20% margin between the first three. 10% x 4 = 40%. 20% * 3 = 60%. 40% + 60% = 100%
#import url('https://fonts.googleapis.com/css?family=Open+Sans|Poppins');
html {
font-size: 1em;
}
body {
background-color: white;
font-family: 'Open Sans', sans-serif;
}
/*logo*/
#logo {
float: left;
width: 5.5em;
background-color: white;
position: relative;
top: -2em;
}
/*pagewrapper*/
.pageWrapper {
width: 1000px;
margin: 0 auto;
padding: 2em;
margin-top: 1.5em;
margin-bottom: 1.5em;
border-style: double;
border-width: thick;
border-color: #7BDFF2;
overflow: auto;
}
/*menu*/
#nav_menu ul {
list-style-type: none;
}
#nav_menu ul li {
float: left;
margin-left: 6em;
margin-right: 4em;
}
#nav_menu li a {
text-align: center;
display: block;
width: 9em;
padding: .9em 0;
text-decoration: none;
background-color: #7BDFF2;
color: #eff7f6;
font-weight: bold;
border-radius: 1em;
}
#nav_menu li a:hover {
color: #f7d6e0;
}
#nav_menu li a:active {
color: #b2f7ef;
}
a {
text-transform: uppercase;
font-weight: bold;
color: #f2b5d4;
}
a:active {
color: #ffcdee;
}
a:hover {
color: #eff7f6;
}
/*copyright*/
footer {
text-align: center;
font-weight: 100;
font-size: .7em;
}
/* aside */
#socialmedia {
width: 80%;
margin: 0 auto;
margin-top: 2em;
}
#socialmedia h3 {
text-transform: lowercase;
color: #fff;
margin: 0 auto;
background-color: #f2b5d4;
letter-spacing: .9em;
font-size: .8em;
width: 100%;
height: 100%;
border-style: dotted;
border-color: #eff7f6;
text-align: center;
border-width: thin;
}
#socialmedia img {
max-width: 100%;
height: auto;
}
/*youtube embed video*/
.video iframe,
.video object,
.video embed {
display: block;
margin: 0 auto;
top: 0;
left: 0;
padding-top: 1em;
clear: both;
}
h1 {
font-weight: bold;
text-align: center;
font-size: 2em;
position: relative;
right: .5em;
bottom: -2em;
}
h2 {
font-weight: 200;
text-align: left;
}
.member {
margin-top: 3em;
}
.p album {
margin-top: .3em;
}
/*albums*/
.album {
border: dotted #000 .2em;
border-radius: .5em;
width: 20em;
min-height: 20em;
font-size: 1em;
margin-top: 5em;
margin: 1em;
padding: 1em;
}
#album img {
height: auto;
max-width: 100%;
}
/*floats and clears*/
.left {
float: left;
}
.right {
float: right;
}
.clearleft {
clear: left;
}
.clearright {
clear: right;
}
.clearboth {
clear: both;
}
.icons:last-child {
justify-content: center;
}
#socialmedia > div {
float: left;
width: 10%;
}
#socialmedia > div:not(:last-child) {
margin-right: 20%;
}
<aside id="socialmedia">
<h3>social media</h3>
<div class="ig">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2016/240/iconmonstr-instagram-13.png" alt="instagram logo">
</div>
<div class="fb">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-facebook-3.png" alt="facebook logo">
</div>
<div class="yt">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2013/240/iconmonstr-youtube-8.png" alt="youtube logo">
</div>
<div class="twt">
<img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-twitter-3.png" alt="twitter logo">
</div>
</aside>

BreadCrumb. Why does it show the whole list instead just the page is opened and the one before?

I need to fix my BreadCrumb in my simple website, it shows the whole list not just the one is opened with the pages before. Like, it should show HOME, HOME>About Us, HOME>Gallery, HOME>Contact US. But just show the whole breadcrumb list the whole time.
Can you help me? thanks
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div>
<img style="width: 370px;" src="pictures/logo.png" />
</div>
<div>
<ul class="breadcrumb">
<li>Home</li>
<li>About Us</li>
<li>Our Menu</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
<div>
<nav id="mainMenu">
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>Our Menu</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
<div style="width: 100%;" id="slider">
<br /> <br />
<figure />
<img src="pictures/image1.png" alt> <img
src="pictures/image2.png" alt> <img src="pictures/image3.jpg"
alt> <img src="pictures/image4.jpg" alt> <img
src="pictures/image5.jpg" alt> <br /> <br />
</div>
<div style="background-color: #b30000; height: 250px; width: 500% px">
<br />
<p>
<h1>
KFC<br> 299 Westmoreland St.<br> Dublin 2<br> Eircode:
D02 HK35<br> Ireland
</h1>
</p>
<br />
<h1>
<p>
Tel + 353 1 9999999<br> Fax + 353 1 6666666<br> Email
KFC#.ie
</p>
</h1>
</div>
</body>
</html>
CSS
font-size: 19px;
font-family: Calibri, arial, helvetica;
color: white;
padding: 0cm 0cm 0cm 1cm;
line-height: 1.3;
letter-spacing:1px;
}
h2 {
font-size: 30px;
font-family: Calibri, arial, helvetica, sans-serif;
color: Brack;
padding: 0cm 0cm 0cm 1cm;
line-height: 1.3;
text-align:center;
}
h3 {
font-size: 15px;
font-family: Calibri, arial, helvetica, sans-serif;
color: Brack;
padding: 0cm 0cm 0cm 11.5cm;
line-height: 1.3;
}
h4 {
font-size: 30px;
font-family: Calibri, arial, helvetica, sans-serif;
color: Brack;
padding: 0cm 0cm 0cm 4cm;
line-height: 1.3;
text-align:left;
float:left;
}
h5 {
font-size: 30px;
font-family: Calibri, arial, helvetica, sans-serif;
color: Brack;
padding-right: 6.5cm;
line-height: 1.3;
text-align:right;
}
*{margin:0; padding:0;}
.menu {
list-style:none;
border:1px solid #c0c0c0;
float:left;
text-align:center;
font-family: Calibri, arial, helvetica, sans-serif;
font-size: 20px
}
.menu li{
position:relative;
float:auto;
border-right:1px solid #c0c0c0;
}
.menu li a{color:#333; text-decoration:none; padding:5px 20px; display:block;}
.menu li a:hover{
background:#b30000;
color:#fff;
-moz-box-shadow:0 3px 10px 0 #CCC;
-webkit-box-shadow:0 3px 10px 0 #ccc;
text-shadow:0px 0px 5px #fff;
}
.menu li ul li{
border:1px solid #c0c0c0;
display:block;
width:150px;
}
#mainMenu {
width:1000px;
margin:0 auto;
list-style:none;
}
#mainMenu li {
float:left;
}
#mainMenu a {
display:block;
text-align:center;
width:150px; /
text-decoration:none;
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: middle;
font-size: 0;
animation: 30s slidy infinite;
}
div.vertical-line{
width: 1px;
background-color: silver;
height: 100%;
float: left;
border: 2px ridge silver ;
border-radius: 10px;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical
}
input[type=submit] {
background-color: #b30000;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #b30000;
}
.container {
border-radius: 5px;
background-color: #808080;
padding: 20px;
width: 45%;
float: left;
font-size: 16px;
font-weight: 900;
font-family: Calibri, arial, helvetica, sans-serif;
letter-spacing:0.5px;
}
body {
background: white;
margin: 0;
font-family: monospace;
}
.gallery {
width: 90%;
margin: auto;
list-style: none;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.gallery li {
margin: 5px;
}
.gallery img {
width: 200px;
height: 200px;
}
.modal {
display: none;
}
.modal:target {
display: block;
position: fixed;
background: rgba(0,0,0,0.8);
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal h3 {
color: #fff;
font-size: 30px;
text-align: center;
margin: 15px 0;
}
.imagen {
width: 100%;
height: 80%;
display: flex;
justify-content: center;
align-items: center;
}
.imagen a {
color: #fff;
font-size: 40px;
text-decoration: none;
margin: 0 10px;
}
.imagen a:nth-child(2) {
margin: 0;
height: 100%;
flex-shrink: 2;
}
.imagen img {
width: 500px;
height: 100%;
max-width: 100%;
border: 7px solid #fff;
box-sizing: border-box;
}
.cerrar {
display: block;
background: #fff;
width: 25px;
height: 25px;
margin: 15px auto;
text-align: center;
text-decoration: none;
font-size: 25px;
color: #000;
padding: 5px;
border-radius: 50%;
line-height: 25px;
}
.map {
float: right;
padding-right: 35px;
padding-bottom: 100px;
}
.divFooter {
background-color: #b30000;
height: 270px;
width: 500%;
float: left;
}
/* Style the list */
ul.breadcrumb {
padding: 10px 16px;
list-style: none;
background-color: #eee;
font-size: 17px;
}
/* Display list items side by side */
ul.breadcrumb li {
display: inline;
}
/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}

Space between navigation bar and drop-down bar

I'm fairly new to html, and when I tried to create a webpage, I encountered a problem. I managed to make a navigation bar with a drop down menu directly under the "Games" section, but if I scroll down and open the drop down menu, it no longer opens directly under the navigation bar. This is my HTML code.
<div class="wrapper">
<div id="main-title">
<header>
<h1>Max Reviews</h1>
</header>
</div> <!-- Title box-->
<div id="nav"> <!-- Navigation Bar -->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About Me</li> <!-- Link to about page -->
<li class="drop">
<p>Games</p>
<div class="drop-content">
<p>Red Faction: Guerrilla</p> <!-- Contains links to the respective pages -->
<p>Way of the Samurai 3</p>
<p>Singularity</p>
</div>
</li>
<li>Reviews</li>
<li>External Store</li> <!-- Link to external site -->
<li>Videos</li> <!-- Contains links to Youtube -->
</ul>
</nav>
</div>
<div class="image"> <!-- Banner-->
<a href="singularity.html">
<img src="modified singularity aging 1.jpg" alt="singularity">
<h2><span>Recommended Game of the Month</span></h2>
</a>
</div>
<div id="home-content"><p>Learn more about the site &#9755here&#9754</p></div>
<div id="footer">
<p>&copy Copyright 2016-2017. All images here were taken and edited by me. All rights reserved. Games featured here might not be suitable for all audience.</p>
</div>
</div>
And this is the stylesheet.
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
width: 100%;
background-color: #FFFFFF;
padding: 0px;
overflow-x: hidden;
}
body {
transition: background 600s ease-in-out;
}
body:hover {
background-color: #4B0101;
}
/*main title*/
#main-title {
background-color: #33B2E7;
color: #FFFFFF;
position: relative;
top: 25px;
left: 20px;
padding: 10px;
margin-left: 10px;
display: inline-block;
transition: color 1s, transform 1s;
transition-delay: 2s;
}
#main-title:hover {
color: black;
transform: rotate(360deg);
}
/* Nav */
#nav nav{
padding-top: 100px;
margin-bottom: 0;
}
#nav ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 40px;
display: inline-block;
}
#nav li {
float: left;
width: 16%;
}
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
}
.active {
background-color: #6CCC0A;
padding-right: 50px;
}
li a:hover, .drop:hover .dropbtn {
background-color: #BFA811;
}
a {
padding-top: 10px;
padding-bottom: 10px;
}
li.drop {
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 50px;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100;
}
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left;
}
.drop-content a:hover {
background-color: #02BBC4
}
.drop:hover .drop-content {
display: block;
position: fixed;
top: 155px;
border: 1px solid black;;
}
/*banner*/
.image {
position: relative;
width: 100%;
}
.image h2 {
position: absolute;
top: 600px;
text-align: center;
width: 100%;
right: 350px;
}
.image h2 span {
color: #FFFFFF;
font: Arial, Calibri, Sans-serif;
background: #000000;
padding: 10px;
}
.image h2:hover span {
background-color: #003316;
}
.button {
position: absolute;
top: 1013px;
left: 700px;
padding: 16px 32px;
text-align: center;
margin: 4px 2px;
display: inline-block;
cursor: pointer;
background-color: rgb(41,120,104);
color: rgb(240,144,22);
font-family: Cambria, Times New Roman, serif;
font-size: 20px;
}
/*content*/
#home-content {
position: relative;
padding: 20px;
text-align: center;
margin-left: 90px;
display: block;
color: #8A0707
}
#home-content a {
color: #09922A
}home-content a:visited {
color: #000000
}
/*Footer*/
#footer {
background: #000000;
width: 100%;
height: 40px;
position: relative;
bottom: 0;
left: 0;
padding-top: 10px;
overflow: hidden;
}
#footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
}
#aboutme h2 {
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
font-family: Cambria, Calibri, sans-serif;
font-size: 20px;
color: #000000;
}
#aboutme article {
padding-top: 20px;
position: relative;
margin-left: 25%;
margin-right: 25%;
display: inline-block;
font-family: arial, cambria, serif;
line-height: 200%;
color: #777000;
text-align: center;
border: 2px solid #000000;
padding: 10px;
}
#gallery-title {
text-align: center;
font-family: Cambria, calibri, sans-serif;
padding-top: 20px;
}
#image-1 {
text-align: center;
margin: 0 25%;
padding: 20px;
}
.img-desc-1 {
padding: 20px;
color: #047615;
}
#image-2 {
text-align: center;
margin: 0 25%;
border: 2px solid #262020;
padding: 20px;
}
#prompt-text {
text-align: center;
padding-top: 30px;
font-family: cambria, calibri, sans-serif;
}
.image-container img{
height: 300px;
width: 300px;
padding-left: 60px;
padding-top: 60px;
}
.image-container p{
padding-left: 80px;
font-family: Arial, cambria, sans-serif;
color: #560404;
text-decoration: none;
}
.image-container {
display: block;
text-align: center;
padding-left: 20px;
}
#image1 {
padding-right: 60px;
padding-bottom: 10%
}
#image2 {
padding-right: 60px;
padding-bottom: 10%;
}
#image3 {
padding-bottom: 0;
margin: 0;
}
.gameimages {
padding-bottom: 15%;
text-align: center;
}
.gameimages p {
padding-top: 20px;
}
.gameimages h3 {
text-align: center;
font-family: cambria, times new roman, sans-serif
}
#side-nav {
height: 200px;
float: right;
bottom: 1500px;
right: 3%;
padding: 10px;
background-color: #8C3406;
display: block;
position: relative;
text-align: center;
}
Please help me as I've been trying to solve this problem for 2 days. Also, this is my first time posting a question here, so forgive me if I indented my code wrongly, or if I inadvertently violated some of the rules of Stack Overflow.
The reason for this behaviour is that your drop-content has position:fixed on hover.
From MDN:
…an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor… Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.
Working example on JSFiddle and here is what I've changed:
#nav ul {
/*overflow: hidden;*/
}
.drop:hover .drop-content {
/*position: fixed;
top: 155px;*/
position: absolute;
}
Update CSS to
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
width: 100%;
background-color: #FFFFFF;
padding: 0px;
overflow-x: hidden;
}
body {
transition: background 600s ease-in-out;
}
body:hover {
background-color: #4B0101;
}
/*main title*/
#main-title {
background-color: #33B2E7;
color: #FFFFFF;
position: relative;
top: 25px;
left: 20px;
padding: 10px;
margin-left: 10px;
display: inline-block;
transition: color 1s, transform 1s;
transition-delay: 2s;
}
#main-title:hover {
color: black;
transform: rotate(360deg);
}
/* Nav */
#nav nav{
padding-top: 100px;
margin-bottom: 0;
}
#nav ul {
list-style-type: none;
margin: 0;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 40px;
display: inline-block;
}
#nav li {
float: left;
width: 16%;
}
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
}
.active {
background-color: #6CCC0A;
padding-right: 50px;
}
li a:hover, .drop:hover .dropbtn {
background-color: #BFA811;
}
a {
padding-top: 10px;
padding-bottom: 10px;
}
li.drop {
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 50px;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100;
}
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left;
}
.drop-content a:hover {
background-color: #02BBC4
}
.drop:hover .drop-content {
display: block;
}
/*banner*/
.image {
position: relative;
width: 100%;
}
.image h2 {
position: absolute;
top: 600px;
text-align: center;
width: 100%;
right: 350px;
}
.image h2 span {
color: #FFFFFF;
font: Arial, Calibri, Sans-serif;
background: #000000;
padding: 10px;
}
.image h2:hover span {
background-color: #003316;
}
.button {
position: absolute;
top: 1013px;
left: 700px;
padding: 16px 32px;
text-align: center;
margin: 4px 2px;
display: inline-block;
cursor: pointer;
background-color: rgb(41,120,104);
color: rgb(240,144,22);
font-family: Cambria, Times New Roman, serif;
font-size: 20px;
}
/*content*/
#home-content {
position: relative;
padding: 20px;
text-align: center;
margin-left: 90px;
display: block;
color: #8A0707
}
#home-content a {
color: #09922A
}home-content a:visited {
color: #000000
}
/*Footer*/
#footer {
background: #000000;
width: 100%;
height: 40px;
position: relative;
bottom: 0;
left: 0;
padding-top: 10px;
overflow: hidden;
}
#footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
}
#aboutme h2 {
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
font-family: Cambria, Calibri, sans-serif;
font-size: 20px;
color: #000000;
}
#aboutme article {
padding-top: 20px;
position: relative;
margin-left: 25%;
margin-right: 25%;
display: inline-block;
font-family: arial, cambria, serif;
line-height: 200%;
color: #777000;
text-align: center;
border: 2px solid #000000;
padding: 10px;
}
#gallery-title {
text-align: center;
font-family: Cambria, calibri, sans-serif;
padding-top: 20px;
}
#image-1 {
text-align: center;
margin: 0 25%;
padding: 20px;
}
.img-desc-1 {
padding: 20px;
color: #047615;
}
#image-2 {
text-align: center;
margin: 0 25%;
border: 2px solid #262020;
padding: 20px;
}
#prompt-text {
text-align: center;
padding-top: 30px;
font-family: cambria, calibri, sans-serif;
}
.image-container img{
height: 300px;
width: 300px;
padding-left: 60px;
padding-top: 60px;
}
.image-container p{
padding-left: 80px;
font-family: Arial, cambria, sans-serif;
color: #560404;
text-decoration: none;
}
.image-container {
display: block;
text-align: center;
padding-left: 20px;
}
#image1 {
padding-right: 60px;
padding-bottom: 10%
}
#image2 {
padding-right: 60px;
padding-bottom: 10%;
}
#image3 {
padding-bottom: 0;
margin: 0;
}
.gameimages {
padding-bottom: 15%;
text-align: center;
}
.gameimages p {
padding-top: 20px;
}
.gameimages h3 {
text-align: center;
font-family: cambria, times new roman, sans-serif
}
#side-nav {
height: 200px;
float: right;
bottom: 1500px;
right: 3%;
padding: 10px;
background-color: #8C3406;
display: block;
position: relative;
text-align: center;
}
2 changes done.
Removed overflow:hidden in #nav ul
Keot display:block only in .drop:hover .drop-content

Why doesn't my link to my pdf work?

I correctly linked my pdf to my project and spelled everything right but when I hover over it and click it, nothing happens. Im not sure if its something to do with the positioning of everything?
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
/*----------header styles-------------*/
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 100%;
padding-left: 3em;
position: relative;
height: 15%;
box-sizing: border-box;
padding-top: 1em;
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 50%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
/*----------hero image styles-------------*/
#hero{
padding-top: 25em;
width: 100%;
height: 30em;
position: relative;
z-index: -1;
}
#heroImage
{
top: 9%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 34em;
top: -5%;
margin-left: 30%;
z-index: 2;
position: relative;
clear: left;
}
h2{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px #000000;
text-align: center;
}
h3{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 30px;
color: white;
opacity: 1.0;
text-shadow: 3px 3px 2px #000000;
text-align: center;
}
a.down{
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-decoration: none;
color: #181b1e;
background: #45CCCC;
position: relative;
padding: 0.6em 1em;
font-size: 1.2em;
-webkit-border-radius: 6px;
width: 100%;
}
a.down:hover{
text-decoration: underline;
}
<body>
<div id="header">
<a href="index.html"><div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Notes</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
<h3>Graphic Artist | Web Designer</h3>
View Resume
</div>
</div>
It's the z-index -1 on #hero - it's basically making it under the body. Change that to 0 or remove it and you should be good.