Unknown cause for horizontal scrolling bar

Well, I’m building my own portfolio website, but I’m still at the beginning of it, and obviously I’m not the best developer.

My problem is: let’s say we have a page, and if the page main content is smaller than the screen size, everything is fine, but if its content if bigger than the screen HEIGHT, needing the VERTICAL scrolling bar, it also triggers the HORIZONTAL scrolling bar, and I can’t find a way to fix it.

I already did edit the CSS using chrome developer tools, and if I change the width sizes of the stuffs on the page, obviously the horizontal scrolling bar disappears, but it is non-sense making those width smaller than what they are in the code (which is 100vw), because I want the website to adapt to screen size.

I’ll leave below a link to stackblitz with my code, and also the github for the project if needed.
I hope anyone could help me, and if so, please explain what did happen, not just the modifications, but the reason for the problem.

Stackblitz: https://stackblitz.com/edit/angular-ivy-mqxzvp

Github: https://github.com/joaocasarin/joaocasarin.github.io

Skills.css

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

.wrapper {
  background-color: #F25A70;
  width: 100vw;
  position: relative;
  min-height: 100%;
  padding: 50px 0 100px; /* BUG PROGRESS BAR */
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Press Start 2P', cursive;
  color: white;
}

.title {
  font-size: 40px;
}

.skills-tec {
  display: flex;
  align-self: center;
  margin-top: 60px;
  font-family: 'Press Start 2P', sans-serif;
  font-size: 25px;
  color: #FFF;
}

.skills-tec .icon {
  margin-right: 25px;
  height: 90px;
}

.skills-tec .icon-rest {
  margin-right: 25px;
  height: 54px;
}

.skills-tec .skill-bar {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.progress-bar {
  box-sizing: border-box;
  background-color: #FFF;
  border: 5px solid #000;
  height: 40px;
}

.progress-bar::-webkit-progress-value {
  background: #7C5E99;
}

.progress-bar::-webkit-progress-bar {
  background-color: white;
}
<section class="wrapper">
  <h2 class="title">Skills</h2>

  <article class="skills-tec">
    <img class="icon" src="../../assets/ico_html5.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">HTML</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>

  <article class="skills-tec">
    <img class="icon" src="../../assets/ico_css3.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">CSS</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>

  <article class="skills-tec">
    <img class="icon" src="../../assets/ico_js.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">JS</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>

  <article class="skills-tec">
    <img class="icon" src="../../assets/ico_react.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">ReactJS</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>

  <article class="skills-tec">
    <img class="icon" src="../../assets/ico_nodejs.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">NodeJS</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>

  <article class="skills-tec">
    <img class="icon" src="../../assets/ico_tdd.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">TDD</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>

  <article class="skills-tec">
    <img class="icon-rest" src="../../assets/ico_restapi.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">Rest API</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>

  <article class="skills-tec">
    <img class="icon-rest" src="../../assets/ico_ux.png" alt="">

    <div class="skill-bar">
      <h3 class="skill-title">UX</h3>

      <progress class="progress-bar" max="100" value="50">
        50%
      </progress>
    </div>
  </article>
</section>

Content bigger than screen size(height):
look at the horizontal scrolling bar and the size of content
Content smaller than screen size(height):
enter image description here

20 thoughts on “Unknown cause for horizontal scrolling bar”

Leave a Comment