My site creates two scroll bars when resolution on the X-axis is decreased

Question

My site creates two scroll bars the main one and another in the div that contains the image of the posters of the films when the resolution in the X axis is decreased. Someone can help me solve this?

@import url('https://fonts.googleapis.com/css?family=Manjari&display=swap');
*{
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}
html, body, #root, .render{
    height: 100%;
}
body{
    background: #111;
    font-family: 'Manjari', sans-serif;
}
.mainBanner{
    background: url('https://i.ibb.co/7XY9yyb/fundo.jpg');
    height: 100%;
    width: 100%;
}
.variacao{
    height: 10%;
    margin-top: 186px;
    background-image: linear-gradient(to bottom, transparent 0%, #111 100%);
}
.wall{
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    overflow: auto;
    width: 100%;
}
.topContainer{
    margin-top: 15px;
}
.topContainer h1{
    font-size: 35px;
    text-align: center;
    color: #e50914;
}
.wellcomemsg{
    text-align: center;
    margin-top: 280px;
    font-size: 80px;
    text-shadow: 1px 2px 3px rgba(255,255,255,0.6);
    color: #FFF;
}
.btns button{
    margin: 0 auto;
    padding: 15px 20px;
    margin-top: 5px;
    cursor: pointer;
    border-radius: 3px;
    margin-left: 10px;
    border: 1px solid #e50914;
    background: #e50914;
    color: #FFF;
    font-size: 22px;
}
.multi{
    position: relative;
}
.multi p{
    color: #FFF;
    font-size: 40px;
    word-wrap: break-word;
    float: right;
    margin-right: 70px;
    margin-top: 12%;
}
.multi img{
    margin-bottom: 5%;
    opacity: 0.95;
    margin-left: 60px;
    width: 30%;
    margin-top: 4%;
    cursor: pointer;
}
.multi img:hover{
    opacity: 1;
}
hr{
    border-color: #ccc; 
    width: 90%;
    margin: 0 auto;
}
@media only screen and (max-width: 600px) {
    .variacao{
        overflow-x: hidden;
        margin-top: 70.8px;
    }
    .wellcomemsg{
        font-size: 30px;
        margin-top: 23.5px;
    }
    .btns button{
        margin-top: 40px;
        font-size: 20px;
    }
    .multi img{
        margin-top: 30px;
        width: 90%;
        margin-left: 5%;
    }
    .multi p{
        width: 100%;
        margin-top: 8%;
        margin-right: 0;
        text-align: center;
        font-size: 20px;
    }
}

<div class="render">
<div class="mainBanner">
    <div class="wall">
        <div class="topContainer">
            <h1>IMM | YouWatch</h1>
        </div>
        <div class="wellcomemsg">
            <p>Bem-vindo a YouWatch</p>
            <p>Cria uma conta gratis ou experimenta</p>
            <p>Uma conta paga durante 1 Mês</p>
            <div class="btns">
                <button>Criar uma conta</button>
                <button>Iniciar Sessão</button>
            </div>
        </div>
        <div class="variacao"></div>
    </div>
</div>
<div class="multi">
<img src="https://i.ibb.co/q9s3R9v/multi.png" alt="Multi Plataformas" title="Multi Plataformas"/>
<p>Veja os seus filmes e series favoritos onde e quando quiser!</p>
</div>
<hr />
<p>T</p>
</div>

Answer 1

It is not a perfect solution. You will see that at certain times the scroll still appears. But here is a simple solution that should work on 90% of screens. Fine tuning just using @media to stay 100% on all screens same...

Your problem is that you put a child element with margin top inside a parent who is 100% tall, it makes the content inside the parent "grow" to over 100% which is the height of it, there creates the scrollbar in the container.

To correct this make the alignment of the child who has the shadow in the image with position:absolut and bottom:0. was the best way I could find. And to control the font size uses the media in VW not in PX, this is the most practical way, but you can also use media queries to control it more professionally https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Media_queries

@import url('https://fonts.googleapis.com/css?family=Manjari&display=swap');

* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

html,
body,
#root,
.render {
    height: 100%;
}

body {
    background: #111;
    font-family: 'Manjari', sans-serif;
}

.mainBanner {
    background: url('https://i.ibb.co/7XY9yyb/fundo.jpg');
    height: 100%;
    width: 100%;
}


.variacao {
    height: 10%;
    /* margin-top: 186px; */
    background-image: linear-gradient(to bottom, transparent 0%, #111 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}


.wall {
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    overflow: auto;
    width: 100%;
}

.topContainer {
    margin-top: 15px;
}

.topContainer h1 {
    font-size: 35px;
    text-align: center;
    color: #e50914;
}

.wellcomemsg {
    text-align: center;
    margin-top: 280px;
    font-size: 5vw;
    text-shadow: 1px 2px 3px rgba(255, 255, 255, 0.6);
    color: #FFF;
}

.btns button {
    margin: 0 auto;
    padding: 15px 20px;
    margin-top: 5px;
    cursor: pointer;
    border-radius: 3px;
    margin-left: 10px;
    border: 1px solid #e50914;
    background: #e50914;
    color: #FFF;
    font-size: 22px;
}

.multi {
    position: relative;
}

.multi p {
    color: #FFF;
    font-size: 40px;
    word-wrap: break-word;
    float: right;
    margin-right: 70px;
    margin-top: 12%;
}

.multi img {
    margin-bottom: 5%;
    opacity: 0.95;
    margin-left: 60px;
    width: 30%;
    margin-top: 4%;
    cursor: pointer;
}

.multi img:hover {
    opacity: 1;
}

hr {
    border-color: #ccc;
    width: 90%;
    margin: 0 auto;
}

@media only screen and (max-width: 600px) {
    .variacao {
        overflow-x: hidden;
        margin-top: 70.8px;
    }

    .wellcomemsg {
        font-size: 30px;
        margin-top: 23.5px;
    }

    .btns button {
        margin-top: 40px;
        font-size: 20px;
    }

    .multi img {
        margin-top: 30px;
        width: 90%;
        margin-left: 5%;
    }

    .multi p {
        width: 100%;
        margin-top: 8%;
        margin-right: 0;
        text-align: center;
        font-size: 20px;
    }
}

<div class="render">
    <div class="mainBanner">
        <div class="wall">
            <div class="topContainer">
                <h1>IMM | YouWatch</h1>
            </div>
            <div class="wellcomemsg">
                <p>Bem-vindo a YouWatch</p>
                <p>Cria uma conta gratis ou experimenta</p>
                <p>Uma conta paga durante 1 Mês</p>
                <div class="btns">
                    <button>Criar uma conta</button>
                    <button>Iniciar Sessão</button>
                </div>
            </div>
            <div class="variacao"></div>
        </div>
    </div>
    <div class="multi">
        <img src="https://i.ibb.co/q9s3R9v/multi.png" alt="Multi Plataformas" title="Multi Plataformas" />
        <p>Veja os seus filmes e series favoritos onde e quando quiser!</p>
    </div>
    <hr />
    <p>T</p>
</div>