Блоки 'плавают', css html

Question

делаю дизайн авторизации и регистрации. И при изменении масштаба страницы блоки заходят на границу других блоков. Вот фото:

Вот код:

'''
<!DOCTYPE html>
<html 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.0">
    <title>Document</title>
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
    <style>

    @import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Concert+One&family=Nunito:wght@800&family=Roboto&display=swap');


        body{
            box-sizing: border-box;
            position: relative;
        }
        input:hover{
            cursor: pointer;
        }
        .kv-button{
            /* display: inline-block; */
            /* background-color: rgb(210, 214, 218); */
            border-radius: 2vw;
            margin-top: 5%;
            margin-left: 25%;
            width: 50vw;
            height: 20vw;
        }
        .vpopi{
            vertical-align:middle;
            position: relative;
            display: inline;
            margin-left: 38%;
            height: 30%;
            width: 50%;
            top: 2%;
            font-size: 5vw;
            color: #d99d12;
            font-family: 'Nunito', sans-serif;
        }
        .bt-login{
            width: 100%;
            height: 30%;
            vertical-align:middle;
            font-family: 'Roboto', sans-serif;
            background-color: rgb(210, 214, 218);
            margin-right: 15%;
            margin-top: 3%;
            margin-bottom: 3%;
            font-size: 4vw;
            border: 0.5vw solid #1289d9;
            border-radius: 2vw;
            font-family: 'Roboto', sans-serif;
            /* font-family: 'Concert One', cursive; */
        }
        .bt-zareg{
            position: relative;
            background-color: rgb(210, 214, 218);
            vertical-align:middle;
            font-family: 'Roboto', sans-serif;
            margin-top: 0%;
            width: 100%;
            height: 30%;
            font-size: 4vw;
            border: 0.5vw solid #1289d9;
            border-radius: 2vw;
            font-family: 'Roboto', sans-serif;
        }
        .login-input{
            width: 100%;
            font-family: 'Roboto', sans-serif;
            border: 0.2vw solid #1289d9;
            height: 2vw;
            font-size: 1.3vw;
            border-radius: 0.5vw;
            margin-top: 10%;
            display: block;
        } 
        .pas-login{
            margin-left: 180vw;
        }
        .login-block{
            display: inline-block;
            margin: auto;
            position:relative;
            left: 1vw;
            width: 40%;
        }
        .zareg-block{
            display: inline-block;
            box-sizing: border-box;
            position: relative;
            margin-top: 10%;
            margin-left: 15vw;
            width: 40%;
        }
        input{
            box-sizing: border-box;
        }
        #login-text{
            padding: 0% 0% 0% 44%;
            color: #d99d12;
            font-size: 3vw;
            box-sizing: border-box;
            height: 3vw;
            border: 0px;
        }
        
  </style>
</head>
<body>
    <div class="kv-button">
        <div class="vpopi">vpopi</div>
        <input type="button" class="bt-login" value="login">
        <input type="button" class="bt-zareg" value="sign up">
    </div>
    <div class="login-block">
        <form action="" method="post">
            <div class="login-input" id="login-text">login</div>
            <input type="text" class="login-input" placeholder="Ваше имя">
            <input type="password" class="login-input" placeholder="Ваш пароль" id="pas-login">
            <input type="submit" class="login-input" value="login">
        </form>
    </div>
    <div class="zareg-block">
        <form action="" method="post">
            <input type="text" class="login-input" placeholder="Ваше имя">
            <input type="password" class="login-input" placeholder="Ваш пароль" id="sign-login">
            <input type="submit" class="login-input" value="sign up">
        </form>
    </div>
    <!-- <div class="kv-1"></div>
    <div class="kv-zareg"></div>
    <div class="kv-zareg-esc">
        <div class="kv-zareg-esc-text">BACK</div>
    </div> -->
    <script>
        // $(document).ready(function() {
        //     $('.bt-zareg').onclick(function(){
        //         $('.kv-zareg').css('opacity', '1');
        //     })
        // });
    </script>
</body>
'''

Помогите пожалуйста.

БЛОГ НА HUSL

Блоки 'плавают', css html

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