How to remove side scroll?

Im trying to remove the white space that is remaining on the right hand side of the screen. Ive tried setting the css stylings to the container to padding 0 and margin 0 including the important tag after. I do have a div sized col 4 and in the inspector tool its shwoing padding 12 but when i apply 0 padding to it, its still there causing side scroll. Ive even applied the important tag to it and it still remains. Below is the live link of the website im working on. Ill include the CSS code below. https://abraham-solis.github.io/reactPortfolio/. This is the styling library im using https://reactstrap.github.io/?path=/story/home-installation–page

Landing Page CSS

.hide {
  background: black;
  overflow: hidden;
}

/* Spans are inline Elements so need Display inline-block to move */
.hide span {
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  display: inline-block;
}

#GG {
  text-decoration: none;
  color: inherit;
}

.space {
  margin: 0 !important;
  padding: 0 !important;
}

@media screen and (max-width:600px) {
  .land {
    max-width: 100%;
    max-height: 100%;
  }

  .big-text {
    text-align: center;
  }

  .nav-links li {
    padding-left: 0;
    text-align: center;
    justify-content: space-around;
    padding-right: 3px;
   
  }

  ul{
    padding-left: 0 !important;
  }

  #logo{
    text-align: center;
    padding-bottom:10px ;

  }

  .intro-text, .text{
    text-align: center;
  }

}

Project Section CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.bg {
  background-color: rgb(15, 39, 63);
  width: 100%;
  overflow: hidden;
}

.header {
  text-align: center;
  padding-left: 10rem;
  padding-top: 9rem;
  margin-bottom: 80px;
  font-size: 5rem;
  font-family: "Lobster", cursive;
  color: rgb(255, 249, 254);
  text-shadow: 2px 2px #ff24a4;
  text-align: center;
  filter: drop-shadow(5px 5px 5px black);
  -webkit-filter: drop-shadow(5px 5px 5px black);
}

.title {
  font-family: "Heebo", sans-serif;
  font-size: 2rem;
  color: rgb(15, 39, 63);
}

.summary {
  font-family: "Heebo", sans-serif;
  font-size: 1rem;
  color: rgb(15, 39, 63);
}



@media only screen and (max-width: 600px) {
  .container {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
  }

  .header {
    text-align: center;
  }

  .paragraph {
    text-align: center;
  }

  .z{
    z-index: 5;
  }

 
}

.stretch{
  min-width: 100% !important;
}

>Solution :

Source : https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

You will need CSS and you have 2 options:

Option #1) Hide both the horizontal and vertical scrollbar.

• Add overflow: hidden; to the body

Option #2) Hide Scrollbars But Keep Functionality

• Hide scrollbar for Chrome, Safari and Opera

.example::-webkit-scrollbar {
 display: none;
}

• Hide scrollbar for IE, Edge and Firefox

.example {
 -ms-overflow-style: none;  /* IE and Edge */
 scrollbar-width: none;  /* Firefox */
}