Absolute position is causing text to skew right - html

Question

I have a link that I'm trying to position:absolute inside a position:relative container. However when I do so, it skews the text to the right by about 10-15pxs and makes it look really off center. However if I change absolute to relative, the text returns to where it should be (the center). Why is position:absolute doing this, and is there any fixes? I've included my code below and any help would be great. Thanks!
The text that is giving me trouble is this:
<div class="green select">
<p><a class="button" href="links/calculator.html">Discover</a></p>
</div>
</div>
Here is the rest of my HTML:
.headerContent {
position: relative;
width: 55%;
margin: auto;
height: 100%;
text-align: center;
}
.title {
font-family: 'Oxygen', sans-serif;
font-weight: 700;
color: white;
font-size: 90px;
padding-bottom: 15px;
}
.headerText {
position: absolute;
bottom: 35%;
font-family: 'Oxygen', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 27px;
width: 90%;
margin: auto;
display: block;
left: 0;
right: 0;
}
.select a {
position: absolute;
font-family: 'Oxygen', sans-serif;
font-weight: normal;
top: 225px;
font-size: 25px;
color: white;
text-decoration: none;
width: 110px;
padding-top: 5px;
padding-bottom: 5px;
margin: auto;
}
.select a::before,
.select a::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #fff;
content: '';
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.select a::after {
border-color: #fff;
opacity: 0;
-webkit-transform: translateY(-7px) translateX(6px);
-moz-transform: translateY(-7px) translateX(6px);
transform: translateY(-7px) translateX(6px);
}
.select a:hover::before,
.select a:focus::before {
opacity: 0;
-webkit-transform: translateY(5px) translateX(-5px);
-moz-transform: translateY(5px) translateX(-5px);
transform: translateY(5px) translateX(-5px);
}
.select a:hover::after,
.select a:focus::after {
opacity: 1;
-webkit-transform: translateY(0px) translateX(0px);
-moz-transform: translateY(0px) translateX(0px);
transform: translateY(0px) translateX(0px);
}
<div class="headerContent">
<nav>
<ul class="navDown">
<li>Intro</li>
<li>Wind</li>
<li>Solar</li>
<li>Nuclear</li>
<li>End</li>
</ul>
<a href="#" class="menu-icon">
<p class="menu"></p>
</a>
</nav>
Scroll
Scroll
<h1 class="title bigTitle">Going Green.</h1>
<p class="headerText">
A change is coming- and that change will be making the switch to green forms of energy. If you are interested in learning how you can help the environment and save money over time- you have come to the right place. It is time to Energize Change. <br>
<span
class="emphasis">Click below to find the perfect green energy source for you and your family!</span>
</p>
<img class="people" src="images/peoplesSad.png" />
<p class="noElechouse"></p>
<div class="green select">
<p><a class="button" href="links/calculator.html">Discover</a></p>
</div>
</div>

Answer 1

Add
.select a
{
left:0;
right:0;
}
Honestly I don't see why you're bent on absolutely positioning your link.
Fiddle

Answer 2

The containing block, which is the first ancestor element that does not have position: static. If there is no such ancestor, the element serves as the containing block.
you can do it that way
add
.relative {position: relative !important}
and append it to
<a class="button relative" href="links/calculator.html">Discover</a>