How can I move login form to the right side (just a little right)?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Sign Up Form</title> <link rel="stylesheet" type="text/css" href="form.css"> </head> <body> <div id="login-box"><div class="left-box"> <div class="left-box"> <h1>Sign up</h1> <input type="text" name="username" placeholder="Username"/> <input type="text" name="email" placeholder="Email"/> <input type="password" name="password" placeholder="Password"/> <input type="password" name="password2" placeholder="Confirm password"/> <input type="submit" name="signup-button" value="Sign up"/> </div> <div class="right-box"> <span class="signinwith">Sign in with <br> Social Network </span> <button class="social facebook">Log in with Facebook</button> <button class="social twitter">Log in with Twitter</button> <button class="social google">Log in with Google</button> </div> <div class="or">OR</div> </div> </body> </html> here is css body{ margin: 0; padding: 0; background: #efefef; font-size: 16px; color: #777; font-family: sans-serif; font-weight: 300; } #login-box{ position: relative; margin: 5% auto; height: 400px; width: 600px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); } left-box{ position: absolute; top: 0; left: 0; box-sizing: border-box; padding: 40px; width: 300px; height: 400px; } h1{ margin: 0 0 20px 0; font-weight: 300; font-size: 28px; } input[type="text"], input[type="password"]{ display: block; box-sizing: border-box; margin-bottom: 20px; padding: 4px; width: 220px; height: 32px; border: none; outline: none;
Often have questions like this?
Learn more efficiently, for free:
