How to remove side scroll?

Question

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;
}

Answer 1

In the about me section, you got margins that are overflowing. Look for the .row class and check the calculation you are doing.

This:

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--bs-gutter-x)*-.5);
    margin-right: calc(var(--bs-gutter-x)*-.5);
    margin-top: calc(var(--bs-gutter-y)*-1);
   }

Change to for example (or edit calc so it's not overflowing):

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: calc(var(--bs-gutter-y)*-1);
   }