im fairly new to html and css and im running into issues with my footer . ive tried so many different things and tutorials and forums and no matter what i do the footer wont move. its always directly under the navbar…idk what im doing wrong… also hr tags dont work for me either.
i know my codes probably messy but the nave bar and most of css were from a template.
–html code–
<!DOCTYPE html>
<html>
<head>
<title>Allen Trey Prod.</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="clearfix">
<div class="container" class="wrapper">
<div class="header-left">
<img src="sega.png">
</div>
<div class="header-right">
<label for="open">
<span class="hidden-desktop"></span>
</label>
<nav>
<a href="#">Home</a>
<a href="#">Inspiration</a>
<a href="content.html">Content</a>
<a href="#">Contact</a>
</nav>
</div>
</div>
<link rel="stylesheet" href="style.css">
<hr style="width: 100%; height: 3px; margin: 20;">
</header>
<div>
<footer>Allen Trey Productions</footer>
</div>
</body>
</html>
—CSS Code—
*{
margin: 0;
padding: 0;
outline: none;
border: none;
-webkit-box-sizing: border-box;
}
*:before,
*:after{
-webkit-box-sizing: border-box;
}
.clearfix {
*zoom: 1;
}
html{
height: 100%;
font-family: Helvetica, arial, sans-serif;
font-size: 12px;
}
body{
background: url('brushed_alu.png');
height: 100%;
}
html,body {
height:100%;
background:center no-repeat fixed url('cyber.jpg');
background-size: cover;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
.container{
width: 80%;
margin: 0 auto;
}
header {
width: 100%;
height: auto;
background: transparent;
}
.header-left,
.header-right{
position: relative;
color: white;
float: left;
}
.header-left{
width: 30%;
}
.header-right label{
position: absolute;
top: -3.7em;
right: 0;
cursor: pointer;
}
.header-right span{
position: relative;
width: 2em;
height: 2em;
background: rgba(255,255,255,.3);
-webkit-transition: all .3s ease;
}
.header-right span:hover{
background: rgba(255,255,255,.6);
}
.header-right span:before,
.header-right span:after{
content: '';
position: absolute;
width: 2em;
height: .5em;
top: 4px;
left: 0;
background: black;
}
.header-right span:after{
top: 14px;
}
.header-right{
width: 70%;
text-align: right;
}
#open{
display: none;
}
h1{
font-weight: 300;
line-height: 40px;
}
a{
text-decoration: none;
color: white;
}
nav>a{
position: relative;
top: 90px;
right: 50%;
display: inline-block;
font-size: 13px;
line-height: 40px;
padding: 0 2em;
-webkit-transition: all .3s ease;
background-color: grey;
background:rgba(0,0,0,.6);
color: white;
margin: 0;
}
nav>a:hover{
background: #EE3030;
color: white;
}
.hidden-desktop{
display: none;
}
section{
width: 100%;
height: auto;
background-image: -webkit-linear-gradient(#80059E 0%, #550486 100%);
}
.section-left,
.section-right{
float: left;
}
.section-left{
width: 70%;
padding: 3em 0;
}
.section-right{
width: 30%;
}
.section-title,
.section-tagline{
color: white;
font-weight: 300;
margin: 0;
padding: 0;
-webkit-transition: all .4s ease;
}
.section-title{
font-size: 4em;
margin-bottom: .3em;
text-shadow: 0 3px 0px black,
0 4px 0px rgba(150,150,150,.5);
}
.section-tagline{
font-size: 1em;
}
.learn-more{
display: table;
margin: 3em auto 0;
padding: 1em 6em;
cursor: pointer;
border-radius: 3px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.8);
background: #EAAF00;
background-image: -webkit-linear-gradient(#EAAF00 0%, #D78100 100%);
font-size: 1.2em;
}
.learn-more:hover{
background: #*{
margin: 0;
padding: 0;
outline: none;
border: none;
-webkit-box-sizing: border-box;
}
*:before,
*:after{
-webkit-box-sizing: border-box;
}
.clearfix {
*zoom: 1;
}
html{
font-family: Helvetica, arial, sans-serif;
font-size: 12px;
}
body{
background: url('brushed_alu.png');
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
width: 100%;
height: auto;
background: black;
}
.header-left,
.header-right{
position: relative;
color: white;
float: left;
}
.header-left{
width: 30%;
}
.header-right label{
position: absolute;
top: -3.7em;
right: 0;
cursor: pointer;
}
.header-right span{
position: relative;
width: 2em;
height: 2em;
background: rgba(255,255,255,.3);
-webkit-transition: all .3s ease;
}
.header-right span:hover{
background: rgba(255,255,255,.6);
}
.header-right span:before,
.header-right span:after{
content: '';
position: absolute;
width: 2em;
height: .5em;
top: 4px;
left: 0;
background: black;
}
.header-right span:after{
top: 14px;
}
.header-right{
width: 70%;
text-align: right;
}
#open{
display: none;
}
h1{
font-weight: 300;
line-height: 40px;
}
a{
text-decoration: none;
color: white;
}
nav>a{
position: relative;
display: inline-block;
font-size: 13px;
line-height: 40px;
padding: 0 2em;
-webkit-transition: all .3s ease;
}
nav>a:hover{
background: rgba(255,255,255,.9);
color: red;
}
.hidden-desktop{
display: none;
}
section{
width: 100%;
height: auto;
background-image: -webkit-linear-gradient(#80059E 0%, #550486 100%);
}
.section-left,
.section-right{
float: left;
}
.section-left{
width: 70%;
padding: 3em 0;
}
.section-right{
width: 30%;
}
.section-title,
.section-tagline{
color: white;
font-weight: 300;
margin: 0;
padding: 0;
-webkit-transition: all .4s ease;
}
.section-title{
font-size: 4em;
margin-bottom: .3em;
text-shadow: 0 3px 0px black,
0 4px 0px rgba(150,150,150,.5);
}
.section-tagline{
font-size: 1em;
}
.learn-more{
display: table;
margin: 3em auto 0;
padding: 1em 6em;
cursor: pointer;
border-radius: 3px;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.8);
background: #EAAF00;
background-image: -webkit-linear-gradient(#EAAF00 0%, #D78100 100%);
font-size: 1.2em;
}
.learn-more:hover{
background: #EE3030;
}
.learn-more:active{
box-shadow: inset 0 2px 0 rgba(0,0,0,.8);
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
.box{
width: 49%;
margin-bottom: 5%;
}
ul li:nth-child(3) .box{
clear: both;
}
ul li:nth-child(2n) .box{
margin-right: 0;
clear: right;
}
}
/* Small monitor */
@media (max-width: 979px){
nav>a{
padding: 0 1.5em;
}
.section-left,
.section-right{
width: 100%;
}
.section-left{
text-align: center;
}
.section-right{
padding: 0 0 2em;
}
.section-title{
font-size: 4em;
margin-bottom: .2em;
}
.section-tagline{
font-size: 1.3em;
}
.learn-more{
margin: 0 auto;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.container{
width: 95%;
}
nav>a{
padding: 0 2em;
}
h1{
padding: .5em 0;
}
.header-left,
.header-right{
width: 100%;
text-align: center;
}
.section-left,
.section-right{
width: 100%;
}
.section-left{
text-align: center;
padding: 2em 0;
}
.section-right{
padding: 1em 0 2em;
}
.section-title{
font-size: 3em;
margin-bottom: .2em;
}
.section-tagline{
font-size: 1.3em;
}
.learn-more{
margin: 0 auto;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
body{
padding: 0 .5em;
}
.container{
width: 90%;
}
nav{
height: 0;
overflow: hidden;
-webkit-transition: all .3s ease;
}
input[type="checkbox"]:checked + nav{
height: 205px;
}
nav>a{
padding: 0 1em;
display: block;
border-bottom: solid 1px rgba(255,255,255,.1);
}
h1{
padding: .5em 0;
}
.header-left,
.header-right{
width: 100%;
text-align: center;
}
.section-left,
.section-right{
width: 100%;
}
.section-left{
text-align: center;
padding: 1em 0;
}
.section-right{
text-align: center;
padding: 1em 0 2em;
}
.section-title{
font-size: 2.4em;
margin-bottom: 0;
}
.section-tagline{
font-size: 1em;
}
.learn-more{
display: table;
margin: 0 auto;
}
.hidden-desktop{
display: block;
}
};
}
.learn-more:active{
box-shadow: inset 0 2px 0 rgba(0,0,0,.8);
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
.box{
width: 49%;
margin-bottom: 5%;
}
ul li:nth-child(3) .box{
clear: both;
}
ul li:nth-child(2n) .box{
margin-right: 0;
clear: right;
}
}
/* Small monitor */
@media (max-width: 979px){
nav>a{
padding: 0 1.5em;
}
.section-left,
.section-right{
width: 100%;
}
.section-left{
text-align: center;
}
.section-right{
padding: 0 0 2em;
}
.section-title{
font-size: 4em;
margin-bottom: .2em;
}
.section-tagline{
font-size: 1.3em;
}
.learn-more{
margin: 0 auto;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.container{
width: 95%;
}
nav>a{
padding: 0 2em;
}
h1{
padding: .5em 0;
}
.header-left,
.header-right{
width: 100%;
text-align: center;
}
.section-left,
.section-right{
width: 100%;
}
.section-left{
text-align: center;
padding: 2em 0;
}
.section-right{
padding: 1em 0 2em;
}
.section-title{
font-size: 3em;
margin-bottom: .2em;
}
.section-tagline{
font-size: 1.3em;
}
.learn-more{
margin: 0 auto;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
body{
padding: 0 .5em;
}
.container{
width: 90%;
}
nav{
height: 0;
overflow: hidden;
-webkit-transition: all .3s ease;
}
input[type="checkbox"]:checked + nav{
height: 205px;
}
nav>a{
padding: 0 1em;
display: block;
border-bottom: solid 1px rgba(255,255,255,.1);
}
h1{
padding: .5em 0;
}
.header-left,
.header-right{
width: 100%;
text-align: center;
}
.section-left,
.section-right{
width: 100%;
}
.section-left{
text-align: center;
padding: 1em 0;
}
.section-right{
text-align: center;
padding: 1em 0 2em;
}
.section-title{
font-size: 2.4em;
margin-bottom: 0;
}
.section-tagline{
font-size: 1em;
}
.learn-more{
display: table;
margin: 0 auto;
}
.hidden-desktop{
display: block;
}
div footer {
width: 100%;
text-align: center;
clear: both;
color: red;
overflow: hidden;
}
hr {
display: block;
clear: both;
width: 100%;
height: 10px;
color: white;
}
.iframe {
margin: 40px;
}
.wrapper {
min-width: 100%;
position: relative;
}
}
idk what im doing wrong or how to fix it
so I got the footer in place I got everything looking good in all browsers now just the different screen resolutions. Thank you guys so much for everything!