Why is my footer not centered? (HTML & CSS) - html

Question

html,
body {
width: 100%;
margin: 0px;
padding: 0px;
font-family: 'Century Gothic', sans-serif;
box-sizing: border-box;
overflow-x: hidden;
}
.wrapper {
overflow-x: hidden;
}
#main-header {
background-color: transparent;
text-align: center;
color: darkslategray;
font-family: 'Century Gothic', sans-serif;
font-size: 20px;
letter-spacing: 4px;
line-height: 50px;
}
#main-header a {
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#main-header a:hover {
color: #5e3232;
}
#menu {
background-color: transparent;
}
#menu ul {
background-color: transparent;
text-align: center;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
font-size: 18px;
padding-left: 10px;
padding-right: 10px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#menu a:hover {
color: rgb(136, 94, 38);
}
body {
background-color: /*linear-gradient(60deg, #CCFFFF, #FFCCCC);*/
thistle;
background-repeat: none;
line-height: 24px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
color: #555;
font-weight: normal;
}
main {
margin: 0 auto;
padding: 30px 20px;
width: 90vw;
}
section {
margin: auto;
}
article {
padding: 20px;
margin-bottom: 20px;
}
footer {
text-align: center;
font-size: 15px;
font-family: 'Century Gothic', sans-serif;
padding: 20px;
background-color: thistle;
bottom: 0;
margin: 0;
width: 100%;
position: absolute;
}
#item a {
font-size: 18px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#item a:hover {
color: rgba(104, 161, 28, 0.911);
}
#media (max-width: 768px) {
#main-header {
float: none;
text-align: center;
padding-top: 15px;
}
#main-header h1 {
font-size: 24px;
line-height: 25px;
}
.logos {
padding-top: 5px;
}
#menu {
margin-top: -10px;
}
#menu a {
font-size: 17px;
}
body {
position: relative;
}
body::after {
content: "";
display: block;
height: 50px;
}
body h2 {
font-size: 20px;
margin-top: -25px;
}
body p {
font-size: 16px;
}
}
<div class="wrapper">
<header id="main-header" class="alt">
<div class="logos">
</i>
</i>
</i>
</div>
</header>
<nav id="menu">
<!--<div class="container">-->
<ul class="links">
<li>Home</li>
<li>About Me</li>
<li class="current">Projects</li>
</ul>
<!--</div>-->
</nav>
<main>
<section>
<article id="item">
<h2>Projects</h2>
<h4>Request</h4>
<small>January to April 2020</small>
<h4>Reverse</h4>
<small>September to December 2018</small>
</article>
</section>
</main>
<footer>
<p>© 2020</p>
</footer>
</div>
I'm not sure why my footer is not centered. The main header, menu, and social media links are all centered, but it's just the footer that is not. I've tried redoing the code from scratch, but I'm not sure if I missed something. I'm new to coding, so any help would be appreciated.

Answer 1

The problem is in your footer css declaration. You have the padding set to 20px and width at 100%, which is adding some space to the left of your footer and offsetting it, but since the width is 100%, it spans past the page width.
Just change the padding to only apply to the top and bottom
footer {
text-align: center;
font-size: 15px;
font-family: 'Century Gothic', sans-serif;
padding: 20px 0;
background-color: thistle;
bottom: 0;
margin: 0;
width: 100%;
position: absolute;
}

Answer 2

Your problem is with box-sizing box-sizing: content-box is the default setting, which means that the rendering engine measures the width (set here to 100%) before adding the padding. box-sizing: content-box will tell the rendering engine to add the padding into the measurement, so your width: 100% will include the 20px padding.
html,
body {
width: 100%;
margin: 0px;
padding: 0px;
font-family: 'Century Gothic', sans-serif;
box-sizing: border-box;
overflow-x: hidden;
}
.wrapper {
overflow-x: hidden;
}
#main-header {
background-color: transparent;
text-align: center;
color: darkslategray;
font-family: 'Century Gothic', sans-serif;
font-size: 20px;
letter-spacing: 4px;
line-height: 50px;
}
#main-header a {
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#main-header a:hover {
color: #5e3232;
}
#menu {
background-color: transparent;
}
#menu ul {
background-color: transparent;
text-align: center;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
font-size: 18px;
padding-left: 10px;
padding-right: 10px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#menu a:hover {
color: rgb(136, 94, 38);
}
body {
background-color: /*linear-gradient(60deg, #CCFFFF, #FFCCCC);*/
thistle;
background-repeat: none;
line-height: 24px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
color: #555;
font-weight: normal;
}
main {
margin: 0 auto;
padding: 30px 20px;
width: 90vw;
}
section {
margin: auto;
}
article {
padding: 20px;
margin-bottom: 20px;
}
footer {
text-align: center;
font-size: 15px;
font-family: 'Century Gothic', sans-serif;
padding: 20px;
background-color: thistle;
bottom: 0;
margin: 0;
width: 100%;
position: absolute;
box-sizing: border-box;
}
#item a {
font-size: 18px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#item a:hover {
color: rgba(104, 161, 28, 0.911);
}
#media (max-width: 768px) {
#main-header {
float: none;
text-align: center;
padding-top: 15px;
}
#main-header h1 {
font-size: 24px;
line-height: 25px;
}
.logos {
padding-top: 5px;
}
#menu {
margin-top: -10px;
}
#menu a {
font-size: 17px;
}
body {
position: relative;
}
body::after {
content: "";
display: block;
height: 50px;
}
body h2 {
font-size: 20px;
margin-top: -25px;
}
body p {
font-size: 16px;
}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="wrapper">
<header id="main-header" class="alt">
<div class="logos">
</i>
</i>
</i>
</div>
</header>
<nav id="menu">
<!--<div class="container">-->
<ul class="links">
<li>Home</li>
<li>About Me</li>
<li class="current">Projects</li>
</ul>
<!--</div>-->
</nav>
<main>
<section>
<article id="item">
<h2>Projects</h2>
<h4>Request</h4>
<small>January to April 2020</small>
<h4>Reverse</h4>
<small>September to December 2018</small>
</article>
</section>
</main>
<footer>
<p>© 2020</p>
</footer>
</div>