Need help getting rid of bottom scroll bar - html

Question

I have been trying to get rid of the horizontal scrollbar in my code. I am creating a personal portfolio page. I have looked at all my widths and I don't think that's the issue. It might be my media queries. I am new to coding and I am sorry if this isn't a good question. I have tried researching and found vmin vh vw vmax and such but when applied to all the widths, it doesn't appear to affect the scroll bar.
#import url('https://fonts.googleapis.com/css2?family=PT+Sans&family=Roboto:wght#400;500&family=Ubuntu&display=swap');
html {
scroll-behavior: smooth;
box-sizing: border-box;
font-size: 62.5%;
background-image: linear-gradient(180deg, #001219, #005F73, #0A9396, #0B9669);
}
body {
font-size: 1.8rem;
font-family: Roboto, PT Sans, Ubuntu;
text-size-adjust: 80%;
}
#navbar {
background: linear-gradient(180deg, #001219, rgba(0, 0, 0, 0));
position: fixed;
width: 100%;
left: 0;
top: 0;
margin: 0;
padding: 0;
}
.navbar-links {
text-decoration: none!important;
color: #F2E9E4;
}
ul {
list-style: none!important;
}
nav>ul {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.invisible-para {
opacity: 0%;
}
#welcome-section {
color: #CA6702;
text-shadow: 2px, 2px;
text-align: center;
height: 100vh;
width: 100%;
font-size: 5vmin;
position: relative;
bottom: 13.5em;
}
.welcome-header {
margin-bottom: 0;
text-shadow: 2px 2px 20px black;
}
.welcome-para {
text-shadow: 2px 2px 20px black;
}
.project-image {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 10px;
}
.projects-header {
padding-top: 3rem!important;
padding-bottom: 2rem;
display: flex;
text-align: center;
justify-content: center;
font-size: 3.5rem;
text-shadow: 2px 2px 20px black;
color: #CA6702;
}
#projects {
display: flex;
flex-direction: column;
text-align: center;
width: 100%;
}
.project-tile {
text-decoration: none;
color: #001219;
text-align: center;
text-shadow: 2px 2px 20px;
font-size: 1.5em;
font-family: PT Sans;
font-weight: bold;
display: flex;
flex-direction: column;
background-color: #94D2BD;
border-radius: 10px;
width: 300px;
padding: 1rem;
margin: 8vh 10vw 0 10vw;
box-shadow: 2px 2px 20px;
}
.grid-container {
width: 100%;
display: grid!important;
grid-template-columns: 1fr 1fr;
grid-gap: 2rem;
align-self: center;
text-align: center;
}
#contact {
text-align: center;
padding: 3em;
height: auto;
text-shadow: 2px 2px 20px;
}
#contact-header {
font-size: 8vmin;
padding: 0 0 2em 0;
}
div>ul {
display: flex;
flex-direction: row;
justify-content: space-around;
}
#profile-link {
text-decoration: none;
color: black;
font-family: Ubuntu;
font-weight: bold;
font-size: 4vmin;
background-color: #94D2BD;
border-radius: 5px;
padding: 8px;
box-shadow: 2px 2px 20px;
}
/*MEDIA QUIERIES BELOW*/
#media (max-width: 800px) {
.grid-container {
grid-template-columns: 1fr;
}
}
#media (max-width:400px) {
#welcome-section {
bottom: 25em;
}
}
/*MEDIA QUEIRIES ABOVE*/
<p class="invisible-para" id="welcome-section"></p>
<nav id="navbar">
<ul>
<li><a class="navbar-links" href="#welcome-section">Welcome</a></li>
<li><a class="navbar-links" href="#projects">Projects</a></li>
<li><a class="navbar-links" href="#contact">Contact</a></li>
</ul>
</nav>
<section id="welcome-section">
<h1 class="welcome-header">Hi, I'm Timothy McMasters</h1>
<p class="welcome-para">an aspiring full-stack developer</p>
</section>
<section id="projects">
<h2 class="projects-header">The following are projects that I have created</h2>
<ul class="grid-container">
<li class="grid-box">
<a class="project-tile" href="https://codepen.io/tmmcmasters/full/QWOEXyO" target="_blank"><img src="https://i.ibb.co/3B42dcS/Form-Survey.png" class="project-image" alt="Form-Survey">Form Survey</img>
</a>
</li>
<li class="grid-box">
<a class="project-tile" href="https://codepen.io/tmmcmasters/full/zYPNdoX" target="_blank"><img src="https://i.ibb.co/wKLyykK/Product-Landing-Page.png" alt="Product-Landing-Page" class="project-image">Product Landing Page</img>
</a>
</li>
<li class="grid-box">
<a class="project-tile" href="https://codepen.io/tmmcmasters/full/MWOmaGJ" target="_blank" class="project-tile"><img src="https://i.ibb.co/0mdYX9X/Techncacal-Documentation-Page.png" alt="Technical-Documentation-Page" class="project-image">Technical Documentation Page</img>
</a>
</li>
<li class="grid-box">
<a href="https://codepen.io/tmmcmasters/full/MWOebeo" target="_blank" class="project-tile"><img src="https://i.ibb.co/tcJcWsw/Tribute-Page.png" alt="Tribute-Page" class="project-image">Tribute Page</img>
</a>
</li>
</ul>
</section>
<section id="contact">
<h2 id="contact-header">Contact Me</h2>
<div class="contact-links">
<ul>
<li><a id="profile-link" href="https://github.com/Tmmcmasters" target="_blank">Github</a></li>
<li><a id="profile-link" href="mailto:tmmcmasters#gmail.com?subject=" feedback " target="_blank ""> Email me </a></li>
<li><a id="profile-link" href="tel:[phone]" target="_blank">Call me</a></li>
</ul>
</div>
</section>

Answer 1

Add a padding: 0; to your grid-container to remove the padding which makes the page scroll:
This is the code:
#import url('https://fonts.googleapis.com/css2?family=PT+Sans&family=Roboto:wght#400;500&family=Ubuntu&display=swap');
html {
scroll-behavior: smooth;
box-sizing: border-box;
font-size: 62.5%;
background-image: linear-gradient(180deg, #001219, #005F73, #0A9396, #0B9669);
}
body {
font-size: 1.8rem;
font-family: Roboto, PT Sans, Ubuntu;
text-size-adjust: 80%;
}
#navbar {
background: linear-gradient(180deg, #001219, rgba(0, 0, 0, 0));
position: fixed;
width: 100%;
left: 0;
top: 0;
margin: 0;
padding: 0;
}
.navbar-links {
text-decoration: none!important;
color: #F2E9E4;
}
ul {
list-style: none!important;
}
nav>ul {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.invisible-para {
opacity: 0%;
}
#welcome-section {
color: #CA6702;
text-shadow: 2px, 2px;
text-align: center;
height: 100vh;
width: 100%;
font-size: 5vmin;
position: relative;
bottom: 13.5em;
}
.welcome-header {
margin-bottom: 0;
text-shadow: 2px 2px 20px black;
}
.welcome-para {
text-shadow: 2px 2px 20px black;
}
.project-image {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 10px;
}
.projects-header {
padding-top: 3rem!important;
padding-bottom: 2rem;
display: flex;
text-align: center;
justify-content: center;
font-size: 3.5rem;
text-shadow: 2px 2px 20px black;
color: #CA6702;
}
#projects {
display: flex;
flex-direction: column;
text-align: center;
width: 100%;
}
.project-tile {
text-decoration: none;
color: #001219;
text-align: center;
text-shadow: 2px 2px 20px;
font-size: 1.5em;
font-family: PT Sans;
font-weight: bold;
display: flex;
flex-direction: column;
background-color: #94D2BD;
border-radius: 10px;
width: 300px;
padding: 1rem;
margin: 8vh 10vw 0 10vw;
box-shadow: 2px 2px 20px;
}
.grid-container {
width: 100%;
display: grid!important;
grid-template-columns: 1fr 1fr;
grid-gap: 2rem;
align-self: center;
text-align: center;
padding: 0; /* added this one */
}
#contact {
text-align: center;
padding: 3em;
height: auto;
text-shadow: 2px 2px 20px;
}
#contact-header {
font-size: 8vmin;
padding: 0 0 2em 0;
}
div>ul {
display: flex;
flex-direction: row;
justify-content: space-around;
}
#profile-link {
text-decoration: none;
color: black;
font-family: Ubuntu;
font-weight: bold;
font-size: 4vmin;
background-color: #94D2BD;
border-radius: 5px;
padding: 8px;
box-shadow: 2px 2px 20px;
}
/*MEDIA QUIERIES BELOW*/
#media (max-width: 800px) {
.grid-container {
grid-template-columns: 1fr;
}
}
#media (max-width:400px) {
#welcome-section {
bottom: 25em;
}
}
/*MEDIA QUEIRIES ABOVE*/
<p class="invisible-para" id="welcome-section"></p>
<nav id="navbar">
<ul>
<li><a class="navbar-links" href="#welcome-section">Welcome</a></li>
<li><a class="navbar-links" href="#projects">Projects</a></li>
<li><a class="navbar-links" href="#contact">Contact</a></li>
</ul>
</nav>
<section id="welcome-section">
<h1 class="welcome-header">Hi, I'm Timothy McMasters</h1>
<p class="welcome-para">an aspiring full-stack developer</p>
</section>
<section id="projects">
<h2 class="projects-header">The following are projects that I have created</h2>
<ul class="grid-container">
<li class="grid-box">
<a class="project-tile" href="https://codepen.io/tmmcmasters/full/QWOEXyO" target="_blank"><img src="https://i.ibb.co/3B42dcS/Form-Survey.png" class="project-image" alt="Form-Survey">Form Survey</img>
</a>
</li>
<li class="grid-box">
<a class="project-tile" href="https://codepen.io/tmmcmasters/full/zYPNdoX" target="_blank"><img src="https://i.ibb.co/wKLyykK/Product-Landing-Page.png" alt="Product-Landing-Page" class="project-image">Product Landing Page</img>
</a>
</li>
<li class="grid-box">
<a class="project-tile" href="https://codepen.io/tmmcmasters/full/MWOmaGJ" target="_blank" class="project-tile"><img src="https://i.ibb.co/0mdYX9X/Techncacal-Documentation-Page.png" alt="Technical-Documentation-Page" class="project-image">Technical Documentation Page</img>
</a>
</li>
<li class="grid-box">
<a href="https://codepen.io/tmmcmasters/full/MWOebeo" target="_blank" class="project-tile"><img src="https://i.ibb.co/tcJcWsw/Tribute-Page.png" alt="Tribute-Page" class="project-image">Tribute Page</img>
</a>
</li>
</ul>
</section>
<section id="contact">
<h2 id="contact-header">Contact Me</h2>
<div class="contact-links">
<ul>
<li><a id="profile-link" href="https://github.com/Tmmcmasters" target="_blank">Github</a></li>
<li><a id="profile-link" href="mailto:tmmcmasters#gmail.com?subject=" feedback " target="_blank ""> Email me </a></li>
<li><a id="profile-link" href="tel:[phone]" target="_blank">Call me</a></li>
</ul>
</div>
</section>