Анимировать элемент div справа

Я хочу, чтобы элемент div перемещался вправо при нажатии кнопки «Войти».

Мне удалось оживить его справа, однако некоторые элементы зависают в окне браузера.

HTML:

<section class = "welcome">
        <div class = "hero-container">
                <h1 id = "welcome">Welcome!</h1>
                <p>Welcome back</p>
                <button id = "sign-in">Sign in</button>
                <button id = "sign-up">Sign up</button>
    </div>

    <div class = "form">
        <form class = "sign-in">
            <h1 id = "signIn-heading">Sign In</h1>

            <input type = "text" name = "email" placeholder = "Email">

            <input type = "text" name = "pass" placeholder = "Password">

        </form>
    </div>

</section>

jQuery:

$("#sign-in").click(function(){

//below I am retrieving the width of the body
var $width= $("body").width();

//assigning the body with to the animate method
$(".hero-container").animate({"left": $width}, "slow");

$("#welcome").html("Sign In");
$(".form").show();

});

This is what I want to achieve https://ibb.co/gmqZCkg

This is the problem I am getting (As you can see once the element is animated it hangs off the browser) https://ibb.co/WP4vHLj