How to remove side scroll? - html

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

Answer 2

I can not see your html code but problem in your div which has class name as row

Answer 3

You could make the scrollbar invisible using
.[insert div name]::-webkit-scrollbar
{
display: none;
}

Answer 4

Disable margin-left and margin-right properties of .row class.

Answer 5

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 */
}