Div leaving the right side of the page in animation

Question

I have a div that is a mobile phone and when I go down the page performs the animation but before performing the animation this div ta getting off the page breaking all the layuout

my div

<div class="col-md-5 ml-auto">
    <div class="iphone-container" style="max-width: 450px !important;" [@scrollAnimation]="state">
        <img src="assets/img/iphone6-2.png">
    </div>
</div>

She gets this white band and smartphones are much bigger

as the animation is executed the track some pq the image is in its correct position placing overflow: hidden I managed to limit the error but then it’s like she’s gone out of the middle of the page gets ugly

Answer 1

I believe that putting a overflow on the axis X in the HTML and in the body should solve your problem.

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }