CSS X Overflow Leaves White Space - html

Question

I'm currently creating an online portfolio and am attempting to use parallax CSS for nice scrolling effects. I have a class which applies certain styles and formatting to divs which are the different sections.
Long story short, to avoid the overflow of the parallax making the page too wide, I am hiding the x overflow so it is shortened to the viewport width. However, this leaves some whitespace on the left side of the screen which is really annoying.
* {
padding: 0;
margin: 0;
}
body {
font: 100% / 1.5;
}
#homeSplash {
background-image: url(https://cdn-images-1.medium.com/max/1600/0*WW-iV1yoPWqUcd5H.);
background-size: cover;
color: white;
text-align: center;
}
#title {
background: rgba(255, 255, 255, 0.75);
padding: 50px;
font-family: 'Ubuntu Condensed', sans-serif;
}
#title h3,
h4,
h1 {
padding: 10px;
}
.parallax {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
-webkit-perspective: 300px;
perspective: 300px;
font-size: 200%;
}
.parallax__group {
position: relative;
height: 500px;
/* fallback for older browsers */
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
#group2 {
z-index: 3;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="parallax">
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">
<div id="title">
<h1>Welcome</h1>
<h3>I am Luca Passariello</h3>
<h4>Welcome to my Portfolio</h4>
</div>
</div>
</div>
<div id="homeSplash" class="parallax__layer parallax__layer--back">
</div>
</div>
</div>
I've tried to use width: 100vw which did nothing to help the problem. Any help would be greatly appreciated.
Note - The live site is here

Answer 1

Adding width:100vw to .parallax__group fixed the problem.
*{
padding: 0;
margin: 0;
}
body{
font: 100% / 1.5;
margin: 0;
}
#homeSplash {
background-image: url(https://cdn-images-1.medium.com/max/1600/0*WW-iV1yoPWqUcd5H.);
background-size: cover;
color: white;
text-align: center;
}
#title{
background: rgba(255, 255, 255, 0.75);
padding: 50px;
font-family: 'Ubuntu Condensed', sans-serif;
}
#title h3, h4, h1{
padding: 10px;
}
.parallax {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
-webkit-perspective: 300px;
perspective: 300px;
font-size: 200%;
}
.parallax__group {
position: relative;
height: 500px; /* fallback for older browsers */
height: 100vh;
width: 100vw;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
#group2 {
z-index: 3;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="parallax">
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">
<div id="title">
<h1>Welcome</h1>
<h3>I am Luca Passariello</h3>
<h4>Welcome to my Portfolio</h4>
</div>
</div>
</div>
<div id="homeSplash" class="parallax__layer parallax__layer--back"
</div>
</div>
</div>
</div>