how to remove white space on right side of page - css

Question

I'm building a responsive site and I'm using overflow-x: hidden property to stop the page from scrolling horizontally and showing white space but it's not working on phones. Every time I navigate back to the page, the horizontal scrollbar is shown again and white space appears on the right. I have looked at various other questions on this issue but cannot seem to solve it.
I believe it is related to the cards on the page, is any of the styling on the cards causing this issue? How can I remove the white space?
html {
overflow-x: hidden;
}
.portfolio-header {
margin-top: 19rem;
margin-left: 31%;
font-size: 30px;
}
}
.card-square
{
position: relative;
width: 90%;
height: 300px;
display: flex;
margin-left: 0px;
margin-top: 50px;
margin-bottom: 100px;
justify-content: center;
align-items: center;
}
.card-square-2 {
margin-top: 0rem;
}
.card-square span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #000;
border-radius: 38% 62% 63% 37% /
41% 44% 56% 59%;
transition: 0.5s;
animation: animate 6s linear infinite;
}
.card-square:hover span:nth-child(1) {
border: none;
background: rgba(22,168,194,0.8);
}
.card-square span:nth-child(2) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #000;
border-radius: 38% 62% 63% 37% /
41% 44% 56% 59%;
transition: 0.5s;
animation: animate2 4s linear infinite;
}
.card-square:hover span:nth-child(2) {
border: none;
background: rgba(22,168,194,0.8);
}
.card-square span:nth-child(3) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #000;
border-radius: 38% 62% 63% 37% /
41% 44% 56% 59%;
transition: 0.5s;
animation: animate 10s linear infinite;
}
.card-square:hover span:nth-child(3) {
border: none;
background: rgba(22,168,194,0.8);
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.content {
position: relative;
color: #000;
text-align: center;
transition: 0.5s;
z-index: 1000;
}
.content a {
position: relative;
/* display: inline-block; */
margin-top: 10px;
border: 2px solid #fff;
padding: 6px 18px;
text-decoration: none;
color: #fff;
margin-left: 12px;
font-weight: 600;
border-radius: 73% 27% 44% 56% /
49% 44% 56% 51%;
}
.content a:hover {
background: #000;
color: #333;
}
.content p, .content h2 {
text-align: center;
width: 85%;
margin-left: 7.5%;
}
.content p {
font-size: 16px;
}
#media only screen and (min-width: 768px) {
.card-square {
width: 400px;
height: 400px;
margin-left: 130px;
}
.card-square-2 {
margin-top: -500px;
margin-left: 55%;
}
.card-square-4 {
margin-left: 55%;
margin-top: -500px;
}
.content p {
font-size: 20px;
}
}
<section class="portfolio" id="portfolio">
<h1 class="portfolio-header">Card section</h1>
<div class="card-square">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 1</h2>
<p> This is card 1.
</p>
Link btn
</div>
</div>
<div class="card-square card-square-2">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 2</h2>
<p>This is card 2. </p>
Link
</div>
</div>
<div class="card-square card-square-3">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 3</h2>
<p>This is card 3.</p>
Link
<a class="second-btn" href="#">Link 2</a>
</div>
</div>
<div class="card-square card-square-4">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 4</h2>
<p>This is card 4.</p>
Link 4
</div>
</div>
</section>

Answer 1

It's because you use width: 100vw - if you have a vertical scroll, your vw will not take the scrollbar into account and will give you horizontal scroll too. Use width: 100% instead (or remove it as h2 is a block element and will take the full width anyway)
html,
body {
margin: 0;
min-height: 100%;
min-width: 100%;
}
body {
margin: 0;
padding: 0;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
section {
margin-bottom: -33px;
}
h1 {
margin-left: 20%;
color: rgb(22, 168, 194);
}
/* Hero Image & navbar */
.banner-text {
width: 100%;
position: absolute;
}
* {
box-sizing: border-box;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: none;
color: white;
font-size: 20px;
}
.navbar-links ul {
margin: 0;
padding: 0;
display: flex;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
text-decoration: none;
color: white;
padding-left: 1rem;
padding-right: 1em;
display: block;
}
.navbar-links li:hover {
background: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 2.5rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
/* Phones */
#media (min-width: 320px) and (max-width: 480px) {
.toggle-button {
display: flex;
}
.navbar-links li:hover {
background: #555;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul {
flex-direction: column;
width: 100%;
/* margin-top: 30px; */
}
.navbar-links li {
text-align: center;
}
.navbar-links li .navlink {
padding: 0.5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
.toggle-button .bar {
height: 3px;
width: 100%;
background: white;
border-radius: 10px;
}
.banner-text h2 {
text-align: center;
color: #fff;
width: 100%;
font-size: 28px;
margin-top: 48%;
}
.banner-text .name {
margin-bottom: -95px;
}
/* For desktop: */
#media only screen and (min-width: 768px) {
.banner-text h2 {
margin-top: 14%;
font-size: 54px;
}
.banner-text .name {
margin-bottom: -100px;
}
}
.animation-area {
/* background: linear-gradient(to left, #16A8C2, #1B1C1C); */
background: rgb(22, 168, 194);
background: linear-gradient(0deg, rgba(22, 168, 194, 1) 0%, rgba(27, 28, 28, 1) 100%);
width: 100%;
height: 100vh;
}
.box-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 97%;
overflow: hidden;
}
.box-area .box-item {
position: absolute;
display: block;
list-style: none;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.2);
animation: animatedSquares 20s linear infinite;
bottom: -150px;
}
.box-area li:nth-child(1) {
left: 86%;
width: 80px;
height: 80px;
animation-delay: 0s
}
.box-area li:nth-child(2) {
left: 12%;
width: 30px;
height: 30px;
animation-delay: 1.5s;
animation-duration: 10s;
}
.box-area li:nth-child(3) {
left: 70%;
width: 100px;
height: 100px;
animation-duration: 5.5s;
}
.box-area li:nth-child(4) {
left: 42%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 15s;
}
.box-area li:nth-child(5) {
left: 65%;
width: 40px;
height: 40px;
animation-delay: 0s;
}
.box-area li:nth-child(6) {
left: 15%;
width: 110px;
height: 110px;
animation-delay: 3.5s;
}
#keyframes animatedSquares {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(-800px) rotate(360deg);
opacity: 0;
}
}
<section>
<div class="banner-text">
<nav class="navbar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a class="navlink" href="#">navlink1</a></li>
<li><a class="navlink" href="#">navlink2</a></li>
<li><a class="navlink" href="#">navlink3</a></li>
<li><a class="navlink" href="#">navlink4">CV</a></li>
</ul>
</div>
</nav>
<h2 class="header name">title name</h2>
<h2 class="header role">title role</h2>
</div>
<div class="animation-area">
<ul class="box-area">
<li class="box-item"></li>
<li class="box-item"></li>
<li class="box-item"></li>
<li class="box-item"></li>
<li class="box-item"></li>
<li class="box-item"></li>
</ul>
</div>
</section>
<section class="about" id="about">
<!-- social media icon bar -->
<ul class="social-media">
<li class="social-item">
<a href="" class="github">
<i class="fa fa-github"></i></a>
</li>
<li class="social-item">
<a href="">
<i class="fa fa-linkedin"></i></a>
</li>
<li class="social-item">
<a href="">
<i class="fa fa-stack-overflow"></i></a>
</li>
</ul>
<ul class="social-media-2">
<li class="social-item">
<a href="" class="codepen">
<i class="fa fa-codepen"></i></a>
</li>
<li class="social-item">
<a href="" class="dribble">
<i class="fa fa-dribbble"></i></a>
</li>
<li class="social-item">
<a href="" class="twitter">
<i class="fa fa-twitter"></i></a>
</li>
</ul>
<h1 class="about-header">About</h1>
<p class="about-text">text
</p>
<p class="career-story">
text
</p>
<div class="polaroid">
<img class="work-colleagues" src="./Images/img.jpg" alt="alt">
<div class="description">
<p class="description-text">text
<a class="featured-link" href="link" width="100%" height="100%">
Polaroid text</a> </p>
</div>
</div>
<p class="interests">
text
</p>
<div class="polaroid polaroid-2">
<img src="./Images/img.jpg" alt="alt" width="100%" height="100%">
<div class="description">
<p class="description-text">text
</p>
</div>
</div>
</section>

Answer 2

You are on the right track, but one thing to keep in mind is that you need to also add meta tags to your HTML header.
Solution
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1, maximum-scale=1">
And of course, in the CSS specify the overflow behavior:
html {
overflow-x: hidden;
}
Explanation
I'll break down the meta tag:
width=device-width this means we are telling the browser to adjust to the device-width
width=minimum-scale this is the smallest scale that you should go
width=maximum-scale this is the biggest scale that you should go
width=initial-scale where to start
user-scalable to allow the user to pinch (zoom in on mobile) or not.
You can read more about it on w3schools.

Answer 3

I found the reason why it's behaving like this.
You have the header and main content in a single section.
This caused all the issues.
Always try to segregate section wisely
Once you segregate. you can see the cards displaying in center.
later adjust your margin-left for .card-square class.
I haven't changed your CSS. Just modified your HTML to segregate the sections. now I cant see white space in the mobile view.
<section class="portfolio" id="portfolio">
<h1 class="portfolio-header">Card section</h1>
</section><section>
<div class="card-square">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 1</h2>
<p> This is card 1.
</p>
Link btn
</div>
</div>
<div class="card-square card-square-2">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 2</h2>
<p>This is card 2. </p>
Link
</div>
</div>
<div class="card-square card-square-3">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 3</h2>
<p>This is card 3.</p>
Link
<a class="second-btn" href="#">Link 2</a>
</div>
</div>
<div class="card-square card-square-4">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>Card 4</h2>
<p>This is card 4.</p>
Link 4
</div>
</div>
</section>