Bit of paragraph code that's throwing my site positioning off? - html

Question

I'm stumped about something, a bit of code that every time I place at the bottom of my site throws my site slightly to the right, which makes it jarring when going from that page to another, you can see the nav panel jumping to the right, etc.
I'm an amatuer at this stuff, designing my own artist website. Any suggestions as to why when I place this in. Appreciate any help!
This is the code causing this shifting:
<div class="copyright">
<p>
COPYRIGHT ©2017 WILSON SCHLAMME, ALL RIGHTS RESERVED
</p>
</div>
and this is on the css page: *note removing this css still doesn't alleviate the shifting.
.copyright {
font-size: 51%;
color: #a6a6a6;
letter-spacing:1px;
padding-bottom:20px;
font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino,
serif;
}
And this is the entire code:
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
/*For IE6 Shenanigans*/
font-family: Verdana, Geneva, sans-serif;
color: black;
}
.bio {
color: #808080;
line-height: 160%;
line-spacing: 40%;
max-width: 700px;
font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino, serif;
margin: 0 auto;
text-align: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 48%;
font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino, serif;
letter-spacing: 2.5px;
word-spacing: 25px;
font-weight: 300;
color: #bfbfbf;
}
#headerimg {
padding-top: 30px;
}
li {
display: inline;
}
.spacer1 {
margin-top: 20px;
}
.spacer2 {
margin-top: 50px;
}
.spacer3 {
margin-top: 50px;
}
.spacer4 {
margin-top: 50px;
}
.infoimg img {
-webkit-box-shadow: 3px 4px 3px #7C7C7C;
box-shadow: 3px 4px 3px #7C7C7C;
min-width: 350px;
display: inline-block;
margin-top: 50px;
border-style: solid;
border-color: gray;
border-width: 1px;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
}
.copyright {
font-size: 51%;
color: #a6a6a6;
letter-spacing: 1px;
padding-bottom: 20px;
font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino, serif;
}
a {
color: #a6a6a6;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: none;
cursor: pointer;
}
.speech {
font-size: 100%;
color: #808080;
line-height: 160%;
line-spacing: 40%;
max-width: 700px;
font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino, serif;
margin: 0 auto;
}
<div id="headerimg">
<img src="img/headerfont2.PNG" style=" width:28%">
</div>
<div class="spacer1">
</div>
<div class="w3-container">
<ul>
<li>VISUAL </li>
<li>INFO</li>
<li>CONTACT</li>
</ul>
</div>
<div class="infoimg">
<img src="img/info.png" style="width:20%">
</div>
<div class="spacer2">
</div>
<div class="bio">
<p>
Wilson Schlamme was born in Jackson Mississippi in 1988. He graduated from the USC School of Cinematic Arts in 2010, focusing his studies on photography and visual design. Finding himself dissatisfied with the medium post college, Wilson shifted his work
into painting, and spent the next several years developing a technique largely derived from fluid based paint and self crafted tools. Wilson currently lives in Los Angeles, where he creates abstract works, continuing the tradition of action painting
and further progressing his organic and overwhelming fluid like style.
</p>
</div>
<div class="spacer3">
</div>
<div class="speech">
<p>
<i>
"While the work ranges in severity, it's structured around a succinct visual
reaction produced from color and textual blending. This reaction shapes not
only the core lines of each piece but is also the vocabulary of the work
itself.
Aggressive blending of this sort (done not with a brush but with a hard
edge), combined with a limited color palette, allows for the viewer to feel
familiar and secure with the work while at the same time in question over
the fervent gestural movements. This polarization of the known yet unknown,
similar yet contrasting, is a circumstance that is shared both with the
viewer and theartist, and likewise becomes a focal point of shared
experience."
</i>
</p>
</div>
<div class="spacer4">
</div>
<div class="copyright">
<p>
COPYRIGHT ©2017 WILSON SCHLAMME, ALL RIGHTS RESERVED
</div>

Answer 1

You can use fixed or absolute positioning. Fixed will keep it on the screen at all times, even during scroll; absolute will scroll:
.copyright {
position: fixed;
bottom: 20px;
font-size: 51%;
color: #a6a6a6;
letter-spacing: 1px;
font-family: "Proxima Nova", Palatino Linotype, Book Antiqua, Palatino, serif;
}
Note: I removed the padding because of fixing the position.
Note: I wasn't getting the shifting either, however, I am not going back and forth between pages.
The style looks good, just be careful of your color contrast. Be sure it passes accessibility standards so people with low vision are able to read your site.