Search code examples
htmlcssline

Undesired white vertical bar on the right side of webpage

enter image description hereI am having a problem with a vertical white bar on the right side appearing on my webpage I was creating. I tried looking up other solutions on StackOverflow. People mentioned having class="row" without a container is a problem sometimes, but I do not see this in my code. Also, they said margin could be an issue. I tried deleting and editing portions of my code with that, and nothing seemed to work.

I have isolated the problem being within the <main> tag. I tried deleting parts of the code at a time to see if deleting a part would fix it. No such luck so far.

If you could help me figure this out, I would greatly appreciate it. I've been trying to figure this out for the last hour or so.

It's on codepen. https://codepen.io/brendenbass/pen/qBrMdmb

Solution

  • If you want to hide the scrollbar but keep it's functionality:

    /* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}