Поле ввода появляется под фоном

Question

Делаю Меню входа, но возникла странная проблема, мне нужно, чтобы поле ввода было на сером фоне, а оно почему-то появляется внизу, может я чего-то не замечаю? Вот как на данный момент выглядит окончательная версия кода

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
*, html, body {
  margin: 0;
  padding: 0;
}

  body {
    font-family: Inter, sans-serif;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
  }

.container {
  width:50vw;
  height: 60vh;
  display: grid;
  grid-template-columns: 100%;
  grid-template-areas: "Login";
  box-shadow: 0 0 17px 10px rgb(0 0 0 / 30%);;
  border-radius: 20px;
  background: white;
  overflow: hidden;
}

.design {
  grid-area: design;
  background: #555555;
  display: none;
  position: relative;
  overflow: hidden;
}


.design .pill-2 {
  position: absolute;
  width: 50vw;
  height: 60vh;
  border-radius: 0;
  background: linear-gradient(#8439C6,#7F39C7,#7B3BCA,#713BCE,#693ED3);
}

.login {
  grid-area: login;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.text-input {
  background: #e6e6e6;
  height: 40px;
  display: inline-block;
  position: relative;
  width: 60%;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 0 15px;
}

.text-input input {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  margin-left: 10px;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 50% 50%;
    grid-template-areas: "design login";
  }
  .design {
    display: block;
  }
}

HTML

<!doctype html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="icon.png">

  <link rel="manifest" href="site.webmanifest">
  <meta name="theme-color" content="#fafafa">
</head>

<body>
<div class="container">
  <div class="design">
    <div class="pill-2"></div>
  </div>
  <div class="login">
    <h3 class="title"> User Login</h3>
    <div class="text-input"></div>
    <div>
      <i class="ri-user-fill"></i>
      <input type="text" placeholder="Email">
  </div>
</body>

</html>

Возможно, что я просто не выспался и не замечаю очевидных вещей, но я сижу и смотрю на это уже несколько десятков минут

align-items: justify-content: display: Я пытался заменить эти строчки, но ничего не поменялось. Где может быть косяк?

UPDATE: косяк был в лишнем div, как сказал Саймон. Так выглядит исправленная часть кода.

<div class="text-input">
  <i class="ri-user-fill"></i>
  <input type="text" placeholder="Email">

БЛОГ НА HUSL

Поле ввода появляется под фоном

Ответы (0 шт):