Почему-то из краев html,body выходит контейнер .login:
Вот сss для body,html:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
border: 3px solid blue;
}
html, body {
margin: 0 0 0 0;
background-color: white;
}
И для самого .login:
.login {
text-align: center;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
border: 3px solid red;
height: 100%;
}
Пробовал разные display и position, не особо помогло
разметка<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Login</title>
<link rel="stylesheet" href="../../css/min.css"/>
<link rel="stylesheet" href="../../css/login.css" />
<script src="../../scripts/login.js" defer></script>
</head>
<body>
<div class="heading-container">
<button class="where" onclick="document.location.replace('/')"><h1>Tasking</h1></button>
</div>
<div class="login">
<div class="container">
<h2 class="text-center">Login</h2>
<form action="../tasking/tasking.html" class="login-form">
<div class="item-group">
<input type="text" id="username" placeholder="Username" class="input" />
<br />
<span class="error-message"></span>
</div>
<div class="item-group">
<input type="password" id="password" placeholder="Password" class="password" />
<br />
<span class="error-message"></span>
</div>
<button class="button" type="submit">Login</button>
<span id="login-result" class="error-message"></span>
</form>
</div>
</div>
</body>
</html>
css для лого и ....heading-container {
position: sticky;
top: 0;
height: 3em;
background-color: #f3f6fc;
}
.where {
position: absolute;
left: 0.35em;
top: 0.35em;
padding: 0px 1em 0px 1em;
text-align: center;
color: white;
background-image: linear-gradient(to bottom right, var(--primary-color), var(--secondary-color));
border-style: hidden;
border-radius: 2em;
cursor: pointer;
}
.where:hover {
box-shadow: lightgray 2px 2px 3px;
transition: 0.3s;
opacity: 0.9;
}
.where h1 {
margin: 3px 0.1em 3px 0.1em;
}
параллельные css:root {
--primary-color: #c97673;
--light-primary-color: #deb0aa;
--secondary-color: #FFDD95;
--light-text-color: #513252;
}
* {
box-sizing:border-box;
}
html, body {
margin: 0 0 0 0;
background-color: white;
}
.heading-container {
position: sticky;
top: 0;
height: 3em;
background-color: #f3f6fc;
}
.where {
position: absolute;
left: 0.35em;
top: 0.35em;
padding: 0px 1em 0px 1em;
text-align: center;
color: white;
background-image: linear-gradient(to bottom right, var(--primary-color), var(--secondary-color));
border-style: hidden;
border-radius: 2em;
cursor: pointer;
}
.where:hover {
box-shadow: lightgray 2px 2px 3px;
transition: 0.3s;
opacity: 0.9;
}
.where h1 {
margin: 3px 0.1em 3px 0.1em;
}
Простой
Простой