Why There is A White space on right side of website in Mobile devices

Question

Why is there an empty white space on the right side of my mobile website display? like this my error screeenshot here and this is my live link

I beg for your help and thank you :)

Answer 1

its your .bottom-cloud in the top-container what causes the issue.

<img class="bottom-cloud" src="img/awan.png" alt="">

it has a position:absolute with position out of the viewport which causes the viewport expanding.

Add an overflow:hidden to the top-container and it wont expand it.

Answer 2

You have issue in awan.png image. This image is absolute position for Mobile and Desktop. In smaller screen this image showing in outside of .top-container . You have two option to fix this issue.

Option 1

Using @media for mobile devices. You no need to use this cloud image for mobile devices.

@media (max-width: 767px){
    .bottom-cloud{
        display: none;
    }
}

Option 2

Make top-container class overflow hidden.

.top-container{
    position: relative;
    padding-top: 100px;
    background-color: var(--biru-muda);
    overflow: hidden;
}

Hope this help!.