How to do horizontal scroll with divs the size of the screen

You've come very close. Remember that sizes with% are relative to the parent of the element. In its example, the wrapper_child class is 400%, so far so good, but the definition of the child class tab , .wrapper_child > .tab , indicates that each div will have the size of 100%, that is, the same size of the father, who is with 400% of the screen.

To solve, basically divide: 100% / 4 = 25%

This is already the size. All you have to do right now is to leave the divs side by side, instead of one on top of the other (you can not see because there is no vertical scroll), and you can do this by adding tab float: left; . >

See how it goes. I just changed the colors to get softer rs:

.wrapper {
  height: 100vh;
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
}

.wrapper_child{
  width: 400%;
  height: inherit;
}

.wrapper_child > .tab {
  float:left;
  width: 25%;
  height: 100%;
  text-align: center;
}

#home {
  background-color: rgba(255, 255, 0, 0.2);/*yellow;*/
}

#gallery {
  background-color: rgba(0, 255, 0, 0.2);/*green;*/
}

#about {
  background-color: rgba(0, 0, 255, 0.2);/*blue;*/
}

#contacts {
  background-color: rgba(255, 0, 0, 0.2);/*red;*/
}

<div class="wrapper">
  <div class="wrapper_child">
    <div id="home" class="tab">
      <h3 class="text-center align-middle">Home</h3>
    </div>

    <div id="gallery" class="tab">
      <h3 class="text-center align-middle">Gallery</h3>
    </div>

    <div id="about" class="tab">
      <h3 class="text-center align-middle">About us</h3>
    </div>

    <div id="contacts" class="tab">
      <h3 class="text-center align-middle">Contacts</h3>
    </div>
  </div>
</div>

If I understand correctly what you want, it's what I've done in this example: Here

I just modified your CSS:

.wrapper_child > .tab {
    width: 25%;
    height: 100%;
    text-align: center;
    display: inline-block;
    margin-right: -4px;
}

You've made the "parent" wrapper 400% the size of your screen. Therefore 100% of its content represents 400% of the screen. Your kids then that are 4 need to be 25% of their space. In order to be able to stay side by side, I also put the CSS display: inline-block; property to perform this work. I also put the margin-right: -4px; property to fit a space that was between divs .

In the example you have, div with class wrapper_child is 400% width, that is, 4 times the screen, so it sets scroll . If you plan to have the same effect, you have to add% w / w of more than 100%.