title: Animate div element to the right
body: <p>I want to animate the div element to move to the right when the 'sign in' button is clicked.</p>
  
  <p>I have managed to animate it to the right, however some of the element hangs off the browser window. </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;section class="welcome"&gt;
          &lt;div class="hero-container"&gt;
                  &lt;h1 id="welcome"&gt;Welcome!&lt;/h1&gt;
                  &lt;p&gt;Welcome back&lt;/p&gt;
                  &lt;button id="sign-in"&gt;Sign in&lt;/button&gt;
                  &lt;button id="sign-up"&gt;Sign up&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div class="form"&gt;
          &lt;form class="sign-in"&gt;
              &lt;h1 id="signIn-heading"&gt;Sign In&lt;/h1&gt;
  
              &lt;input type="text" name="email" placeholder="Email"&gt;
  
              &lt;input type="text" name="pass" placeholder="Password"&gt;
  
          &lt;/form&gt;
      &lt;/div&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p>jQuery: </p>
  
  <pre><code>$("#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();
  
  });
  </code></pre>
  
  <blockquote>
    <p>This is what I want to achieve 
      <a href="https://ibb.co/gmqZCkg" rel="nofollow noreferrer">https://ibb.co/gmqZCkg</a></p>
    
    <p>This is the problem I am getting (As you can see once the element is animated it hangs off the browser)
      <a href="https://ibb.co/WP4vHLj" rel="nofollow noreferrer">https://ibb.co/WP4vHLj</a></p>
  </blockquote>