Появился непонятный отступ на странице слева (появился не нужный скролл бар снизу). Как убрать отступ?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- ading icon -->
<link rel="icon" href="facebook.png">
<!-- adding css file -->
<link rel="stylesheet" href="facebook.css">
<title>Facebook - Log In or Sign In</title>
</head>
<style>
input::placeholder {
color:#999999;
}
input:active::placeholder {
color: #bfbfbf;
}
input:focus::placeholder {
color: #bfbfbf;
}
</style>
<body>
<div class="main_block">
<input id="form_1" type="email" placeholder="Email or phone number" maxlength="20" required>
<input id="form_2" type="password" placeholder="Password" required>
<input id="submit_button" type="submit" value="Log In" required>
<input id="submit_button_2" type="button" value="Create new account">
<a id="link_1" href="" target="_blank">Forgot password?</a>
<hr id="hr_1">
</div>
<img id="facebook_img" src="https://static.xx.fbcdn.net/rsrc.php/y8/r/dF5SId3UHWd.svg">
<div id="connect_phrase">
<p>Connect with friends and the world <br> around you on Facebook</p>
</div>
<div id="celebrity_phrase">
<p><a id="link_2" href="">Create a Page</a> for celebrity, brand or business.</p>
</div>
<hr id="hr_2">
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
background-color: #e6eaf2;
}
.main_block {
position: absolute;
margin-left: 830px;
margin-top: 120px;
font-family: 'Roboto', sans-serif;
background-color: white;
height: 360px;
width: 420px;
border-radius: 12px;
}
#form_1 {
position: relative;
right: -15px;
top: 15px;
border: 1px solid #cccccc;
border-radius: 6px;
height: 40px;
width: 360px;
padding: 6px 12px;
font-size: 17px;
}
#form_2 {
position: relative;
right: -15px;
top: 25px;
border: 1px solid #cccccc;
border-radius: 6px;
height: 40px;
width: 360px;
padding: 6px 12px;
font-size: 17px;
}
#submit_button {
position: relative;
top: 40px;
right: -17px;
color: white;
background-color: #1877f2;
font-family: 'Roboto', sans-serif;
font-size: 21px;
font-weight: bold;
border: none;
border-radius: 5px;
height: 50px;
width: 382px;
text-align: center;
}
#submit_button:hover {
background-color: #0d65d9;
cursor: pointer;
}
#link_1 {
position: relative;
right: 80px;
top: 55px;
color: #3385ff;
text-decoration: none;
}
#link_1:hover {
text-decoration-line: underline;
text-decoration-thickness:
cursor: pointer;
}
#link_2 {
text-decoration: none;
color: black;
font-weight: bold;
font-size: 15px;
font-family: 'Poppins', sans-serif;
}
#link_2:hover {
text-decoration: underline;
}
#hr_1 {
position: relative;
top: 60px;
background-color: dimgray;
height: -1px;
width: 390px;
opacity: 0.5;
}
#hr_2 {
position: relative;
bottom: -131px;
color: white;
background-color: white;
height: 150px;
border: none;
}
#submit_button_2 {
position: relative;
top: 135px;
right: -100px;
color: white;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: bold;
background-color: #00b300;
border: none;
border-radius: 5px;
height: 45px;
width: 220px;
text-align: center;
padding-left: 5px;
}
#submit_button_2:hover {
background-color: #009900;
cursor: pointer;
}
#celebrity_phrase {
position: relative;
right: -883px;
top: -23px;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
}
#facebook_img {
position: relative;
right: -220px;
top: 27px;
height: 400px;
width: 320px;
}
#connect_phrase {
position: relative;
right: -250px;
top: -160px;
font-family: 'Open Sans', sans-serif;
font-size: 26px;
}
Средний
