I am trying to build my own website but seem to fail at the footer which will not be the full width despite being set to 100%. The navbar covers 100% of the width but the footer always stays centered and leaves a gap left and right. When I only use the navbar code, the website works properly but does not have a footer. When I only use the footer code, the website works properly but does not have a navbar. I fail as soon as I try putting the code together and I would really appreciate any tips! Thank you for your help - I am a brutal beginner and I simply cant solve this problem. Thank you!
**HTML:**
<!DOCTYPE html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<nav class="navbar">
<img class="logo" src="logo.png">
<ul>
<li> <a class="active" href="#">Home</a></li>
<li> <a href="#">About</a></li>
<li> <a href="#">CV</a></li>
<li> <a href="#">Favourites</a></li>
<li> <a href="#">Contact</a></li>
</ul>
</nav>
<div class="center">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
<!-- Begin Footer -->
<footer>
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
<li><a href="#"><i class="fa fa-phone"></i></a></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
<!-- End Footer -->
</body>
</html>
**CSS:**
@import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
*{
padding: 0;
margin: 0;
}
body{
background-color: ghostwhite;
background-size: cover;
padding: 0;
margin: 0;
}
.navbar{
height: 80px;
width: 100%;
background-color: #808080;
}
.logo{
width: 140px;
height: auto;
padding: 15px 50px;
}
.navbar ul{
float: right ;
margin-right: 20px;
}
.navbar ul li{
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a{
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
font-family: 'Roboto', sans-serif;
transition: .2s;
}
.navbar ul li a:hover{
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
user-select: none;
}
.center h1{
color: black;
font-size: 70px;
font-weight: bold;
width: 900px;
text-align: center;
}
.center h2{
color: black;
font-size: 70px;
font-weight: bold;
width: 885px;
margin-top: 10px;
text-align: center;
}
.center .buttons{
margin: 35px 280px;
}
.buttons button {
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons .btn{
margin-left: 25px;
}
.buttons button:hover{
background: #4b79b4;
}
footer{
position: absolute;
background-color: #808080;
height: auto;
width: 100%;
padding-top: 40px;
color: black;
}
.footer-content{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3{
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p{
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}
.socials{
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li{
margin: 0 10px;
}
.socials a{
text-decoration: none;
color: lightsteelblue;
}
.socials a i{
font-size: 1.1rem;
transition: color .4s ease;
}
.socials a:hover i{
color: #4b79b4;
}
.footer-bottom{
background-color: #737373;
width: 100%;
padding: 20px 0;
text-align: center;
}
.footer-bottom p{
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span{
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
CodePudding user response：
Based on the posted code, you need to close the <div class="center"> tag, and then position the footer. The footer was inheriting width from the center class.
NOTE: I wrapped the css in a style tag for simpler testing.
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<nav class="navbar">
<img class="logo" src="logo.png">
<ul>
<li> <a class="active" href="#">Home</a></li>
<li> <a href="#">About</a></li>
<li> <a href="#">CV</a></li>
<li> <a href="#">Favourites</a></li>
<li> <a href="#">Contact</a></li>
</ul>
</nav>
<div class="center">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
<!-- NEW -->
</div>
<!-- -->
</div>
<!-- Begin Footer -->
<footer>
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
<li><a href="#"><i class="fa fa-phone"></i></a></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
<!-- End Footer -->
</body>
</html>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
*{
padding: 0;
margin: 0;
}
body{
background-color: ghostwhite;
background-size: cover;
padding: 0;
margin: 0;
}
.navbar{
height: 80px;
width: 100%;
background-color: #808080;
}
.logo{
width: 140px;
height: auto;
padding: 15px 50px;
}
.navbar ul{
float: right ;
margin-right: 20px;
}
.navbar ul li{
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a{
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
font-family: 'Roboto', sans-serif;
transition: .2s;
}
.navbar ul li a:hover{
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
user-select: none;
}
.center h1{
color: black;
font-size: 70px;
font-weight: bold;
width: 900px;
text-align: center;
}
.center h2{
color: black;
font-size: 70px;
font-weight: bold;
width: 885px;
margin-top: 10px;
text-align: center;
}
.center .buttons{
margin: 35px 280px;
}
.buttons button {
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons .btn{
margin-left: 25px;
}
.buttons button:hover{
background: #4b79b4;
}
footer{
position: absolute;
background-color: #808080;
height: auto;
width: 100%;
padding-top: 40px;
color: black;
/* NEW */
bottom: 0px;
/* */
}
.footer-content{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3{
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p{
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}
.socials{
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li{
margin: 0 10px;
}
.socials a{
text-decoration: none;
color: lightsteelblue;
}
.socials a i{
font-size: 1.1rem;
transition: color .4s ease;
}
.socials a:hover i{
color: #4b79b4;
}
.footer-bottom{
background-color: #737373;
width: 100%;
padding: 20px 0;
text-align: center;
}
.footer-bottom p{
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span{
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
</style>
CodePudding user response：
the footer element has width: 100% which will give it the width of the parent.
in this case it will take on the width of .center class.
also this problem is hard to fix because of the .center having a transform: translate(-50%, -50%).
a much better way to center elements is having display: grid and place-items: center
CodePudding user response：
In Html you forgot to close div .wrapper and div .center
In Css If you set up a footer absolutely then You should add bottom: 0; . I also added overflow-x:hidden; in body selector. No it should works ..decent;-)
*{
padding: 0;
margin: 0;
}
body{
background-color: ghostwhite;
background-size: cover;
padding: 0;
margin: 0;
overflow-x:hidden;
}
.navbar{
height: 80px;
width: 100%;
background-color: #808080;
}
.logo{
width: 140px;
height: auto;
padding: 15px 50px;
}
.navbar ul{
float: right ;
margin-right: 20px;
}
.navbar ul li{
list-style: none;
margin: 0 8px;
display: inline-block;
line-height: 80px;
}
.navbar ul li a{
text-decoration: none;
color: white;
font-size: 20px;
padding: 2px 6px;
font-family: 'Roboto', sans-serif;
transition: .2s;
}
.navbar ul li a:hover{
background: lightsteelblue;
border-radius: 2px;
}
.wrapper .center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: sans-serif;
user-select: none;
}
.center h1{
color: black;
font-size: 70px;
font-weight: bold;
width: 900px;
text-align: center;
}
.center h2{
color: black;
font-size: 70px;
font-weight: bold;
width: 885px;
margin-top: 10px;
text-align: center;
}
.center .buttons{
margin: 35px 280px;
}
.buttons button {
height: 50px;
width: 150px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: lightsteelblue;
border: 1px solid #4b79b4;
outline: none;
cursor: pointer;
border-radius: 25px;
transition: .5s;
}
.buttons .btn{
margin-left: 25px;
}
.buttons button:hover{
background: #4b79b4;
}
footer{
position: absolute;
bottom: 0;
background-color: #808080;
height: auto;
width: 100%;
padding-top: 40px;
color: black;
}
.footer-content{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3{
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p{
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}
.socials{
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li{
margin: 0 10px;
}
.socials a{
text-decoration: none;
color: lightsteelblue;
}
.socials a i{
font-size: 1.1rem;
transition: color .4s ease;
}
.socials a:hover i{
color: #4b79b4;
}
.footer-bottom{
background-color: #737373;
width: 100%;
padding: 20px 0;
text-align: center;
}
.footer-bottom p{
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span{
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}<body>
<div class="wrapper">
<nav class="navbar">
<img class="logo" src="logo.png">
<ul>
<li> <a class="active" href="#">Home</a></li>
<li> <a href="#">About</a></li>
<li> <a href="#">CV</a></li>
<li> <a href="#">Favourites</a></li>
<li> <a href="#">Contact</a></li>
</ul>
</nav>
<div class="center">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
</div>
</div>
<!-- Begin Footer -->
<footer>
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
<li><a href="#"><i class="fa fa-phone"></i></a></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
<!-- End Footer -->
</body>