Почему customer__container лежит внутри другово контейнера, но в коде раздельно

Question

Тренируюсь делать формы и такая делема... Голову поломал не могу найти причину, ПОЧЕМУ .customer-login__container находиться в .block__contact. В коде все нормально, всё на местах, контейнеры отдельно в .wrapper... Не знаю, cдаюсь. Много времени убил.

/* 
&display=swap
&subset=cyrillic-ext 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic, &display=swap");

/* ОБНУЛЕНИЕ СТИЛЕЙ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a,
a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
    font-size: inherit;
}

img {
    vertical-align: top;
}

html,
body {
    height: 100%;
}

html {
    /* по умолчанию */
    /* font-size: 16px;  */
}

body {
    line-height: 1;
    color: #fff;
    background-color: #333;
    font-family: 'Poppins';

}

.wrapper {
    min-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 50px 0;
}

/* ------------------------------ */
[class*="__container"] {

    /* ШИРИНУ УБРАТЬ ДЛЯ АДАПТИВА */
    max-width: 1050px;
    margin: 0px auto;
    padding: 0px 15px;
}

.block__form {
    display: none;
}

/* .main {
    flex-grow: 1;
    padding: 30px;
}

[class*="__container"] {
    max-width: 1050px;
    margin: 0px auto;
    padding: 0px 15px;
}

.block__form {
    background: #5D62B5;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 40px;
    padding: 76px 54px;
    max-width: 585px;
    display: none;

}

.block__form {}

.form__title {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    font-size: 36px;
    line-height: 117%;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 43px;
}

.input {
    padding: 15px 15px;
    background: #5D62B5;
    border: 2px solid #fff;
    border-radius: 10px;
    flex: 1 1 47%;
}

form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.input_boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;

}

.input_boxes:not(:last-child) {
    margin-bottom: 30px;
}

textarea::placeholder {
    color: white;
    opacity: 0.8;
}

input::placeholder {
    color: white;
    opacity: 0.8;
    letter-spacing: 0.15px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}


input:focus {
    outline: 0;
    outline-offset: 0;
    box-shadow: 3px 3px 5px -1px rgba(255, 255, 255, 0.79);


}

textarea {
    resize: none;
}

.sumbit {
    border-radius: 8px;
    padding: 15px 25px;
    display: flex;
    justify-content: flex-end;
    background: #F2726F;
    justify-content: center;
    border-radius: 10px;
}

button {
    cursor: pointer;
    background: #F2726F;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    line-height: 200%;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.15px;
    text-transform: uppercase;
} */

/* ---------- */

.contact__container {
    /* ШИРИНУ УБРАТЬ ДЛЯ АДАПТИВА */
    max-width: 446px;
    padding: 17px 30px 20px 30px;
    background-color: #fff;
    border: 1px solid black;
    color: black;
    font-family: 'Poppins';
    border-radius: 5px;

}

.block__contact {}

.contact {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.form-label {
    font-weight: 600;
    font-size: 13px;
    line-height: 210%;
    color: #000000;
}

.contact__header:not(:last-child) {
    margin: 0 0 28px 0;
}

.contact__header:first-child {
    margin-bottom: 30px;
}

.contact__title {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 150%;
    color: #000000;
    margin-bottom: 18px;

}

.contact__label {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: #000000;
    margin-bottom: 12px;
}

.contact__label-text {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    color: #666666;
}

.form__box {
    display: flex;
    flex-wrap: wrap;
}

.form__label {
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 210%;
    color: #000000;
    padding: 8px 0px;
    flex-wrap: wrap;
    flex: 1 1 100%;
}

.form-item {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 100%;
}

.input__contact {
    margin-bottom: 12px;
    background: #FFFFFF;
    border: 1px solid #A2A6B0;
    border-radius: 4px;
    padding: 10px 10px;
    flex: 1 1 100%;
}

.form__contact {}

.form__country {}

.form__state {}

.form__zip {}

.rate__box {
    margin: 0 0 30px 0px;

}

.form__rate {
    display: flex;
    flex-wrap: wrap;
}

.form__rate {}

.input__radio {
    position: absolute;
    top: 13px;
    transform: scale(1.4);
}

.rate__text {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 143%;
    padding: 0 0 0 21px;
    color: #000000;
}

.rate__input {
    display: flex;
    vertical-align: top;
    padding: 10px 0px;
    position: relative;
}

.label__rate {
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    line-height: 210%;
    color: #000000;
}

.discount__box {}

.discount__title {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    color: #000000;

}

.form__discount {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #CACDD8;


}

.input__contact {}

.discount__apply {
    color: #0156FF;
    border: 2px solid #0156FF;
    border-radius: 50px;
    flex: 1 1 100%;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    padding: 15px 0;
    margin: 10px 0 30px 0;
}

.order__box {}

.order__prices {}

.order__prices>div {}

.order__subtotal {}

.order-label_flex-block {
    display: flex;
    justify-content: space-between;
}

.order-label_flex {
    flex: 0 1 auto;
}

.subtotal__label {}

.subtotal__value {}

.order__shipping {
    flex-wrap: wrap;
}

.shipping__label {}

.shipping__value {}

.shipping__sub-text {
    flex: 1 1 100%;
    font-weight: 400;
    font-size: 10px;
    line-height: 180%;
    color: #A2A6B0;
}

.order__tax {}

.tax__label {}

.tax__value {}

.order__gst {}

.gst__label {}

.gst__value {}

.order__order-total {}

.order-total__label {}

.order-total__value {
    font-weight: 600;
    font-size: 18px;
    line-height: 210%
}

.order__pay {
    display: flex;
    flex-wrap: wrap;
}

.order__checkout {
    background: #0156FF;
    border-radius: 50px;
    text-align: center;
    padding: 15px 0;


}

.order__checkout input {
    background-color: #0156FF;
    color: white;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
}



.order__checkout-paypal {
    background: #FFB800;
    border-radius: 50px;
    text-align: center;
    padding: 15px 0;
    position: relative;
}

.order__checkout-paypal input {
    color: #232C65;
    background: #FFB800;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    padding: 0 15px 0 0;
}

.order__checkout-paypal img {
    padding-right: 10px;
}

/* .order__checkout-paypal::after {
    content: '';
    background: url("/img/GroupsvgPP.svg") top left / 72px 12px no-repeat;
    position: absolute;
    width: 72px;
    height: 12px;
} */

.order__checkout-adresses {
    border: 2px solid #A2A6B0;
    border-radius: 50px;
    text-align: center;
    padding: 15px 0;
}

.order__checkout-adresses input {
    color: #666666;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    background-color: white;
}

[class*="order__checkout"] {
    flex: 1 1 100%;
    margin-bottom: 20px;
}

[class*="order__checkout:last-child"] {
    margin-bottom: 24px;
}

.order__learn-more-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 120.5%;
    position: relative;
    padding: 3px 0 0 78px;
    color: #272560
}

.order__learn-more::before {
    content: '';
    background: url("/img/order-zip.svg") 0 0 / 66px 21px no-repeat;
    position: absolute;
    width: 66px;
    height: 21px;
}

.order__learn-more strong {
    color: #272560;
}

.learn_underline {
    text-decoration: underline;
}

.block__contact {
    border: 1px solid yellow;
}

/* REGISTRATION */

.customer-login__container {
    
    max-width: 564px;
    padding: 37px 57.5px 40.96px 57.5px;
    background-color: red;
}

.customer__registration {}

.registration {}

.registration__heading {}

.registration__title {}

.registration__sub-title {}

.registration__form {}

.forms__registration {}

<!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>
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>
    <div class="wrapper">
        <div class="block__container">
            <div class="block__form">
                <div class="form__block">
                    <h2 class="form__title">
                        Make an appointment
                    </h2>
                    <div class="forms">
                        <form action="contant.php" method="get" enctype="multipart/form-data">
                            <div class="input_boxes">
                                <input required autocomplete="off" multiple type="text" name="username" class="input"
                                    placeholder="Name">
                                <input required autocomplete="off" multiple type="email" name="Email" class="input"
                                    placeholder="Email">
                                <input required autocomplete="off" multiple type="tel" name="tel" class="input"
                                    placeholder="Phone Number">
                                <input required autocomplete="off" multiple type="text" name="Service" class="input"
                                    placeholder="Select Service">
                                <textarea name="comment" id="" cols="60" rows="10" maxlength="20"
                                    placeholder="Tell us about your puppers include his/her name"
                                    class="input"></textarea>
                            </div>
                            <div class="sumbit">
                                <button type="submit">Make an Appointment</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="contact__container">
            <div class="block__contact">
                <div class="contact">
                    <div class="contact__header">
                        <h3 class="contact__title">Summary</h3>
                        <div class="contact__label">Estimate Shipping and Tax</div>
                        <div class="contact__label-text">Enter your destination to get a shipping estimate.</div>
                    </div>
                    <div class="form__box">
                        <form class="form__contact" action="contact.php" method="post" enctype="multipart/form-data">
                            <div class="form__country form-item">
                                <label class="form__label" for="country" class="form-label">Country</label>
                                <select class="input__contact" name="country" id="country">
                                    <option value="">Australia</option>
                                    <option value="">Georgia</option>
                                    <option value="">USA</option>
                                    <option value="">Venesuela</option>
                                </select>
                            </div>
                            <div class="form__state form-item">
                                <label class="form__label" for="state" class="form-label">State/Province</label>
                                <input class="input__contact" type="text" name="state" id="state" multiple
                                    autocomplete="off" placeholder="State">
                            </div>
                            <div class="form__zip form-item" class="form-label">
                                <label class="form__label" for="zip">Zip/Postal Code</label>
                                <input class="input__contact" type="text" name="zip" id="zip" multiple
                                    autocomplete="off" placeholder="Zip/Postal code">
                            </div>
                            <div class="rate__box">
                                <div class="form__rate">
                                    <label class=" form-label" for="standart-rate ">Standard Rate</label>
                                    <div class="rate__input">
                                        <input class="input__radio" type="radio" name="rate" id="standart__rate">
                                        <div class="rate__text">
                                            Price may vary depending on the item/destination. Shop Staff will contact
                                            you.
                                            $21.00
                                        </div>
                                    </div>
                                </div>
                                <div class="form__rate">
                                    <label class=" form-label" for="store__rate form-label">Pickup from
                                        store</label>
                                    <div class="rate__input">
                                        <input class="input__radio" type="radio" name="rate" id="store__rate">
                                        <div class="rate__text">
                                            1234 Street Adress City Address, 1234 $0.00
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="discount__box">
                                <h3 class="discount__title">Apply Discount Code</h3>
                                <div class="form__discount form-item">
                                    <label class="form__label" for="code">Enter discount code</label>
                                    <input class="input__contact" type="text" name="code" id="code" multiple
                                        autocomplete="off" placeholder="Enter Discount code" max="6">
                                    <input class="discount__apply" type="button" value="Apply Discount">
                                </div>
                            </div>
                            <div class="order__box">
                                <div class="order__prices">
                                    <div class="order__subtotal order-label_flex-block">
                                        <div class="subtotal__label form__label order-label_flex">Subtotal</div>
                                        <div class="subtotal__value form__label  order-label_flex">$13,047.00</div>
                                    </div>
                                    <div class="order__shipping order-label_flex-block">
                                        <div class="shipping__label form__label order-label_flex">Shipping </div>
                                        <div class="shipping__value form__label order-label_flex">$21.00</div>
                                        <div class="shipping__sub-text">(Standard Rate - Price may vary depending on the
                                            item/destination. Shop Staff will contact you.)</div>
                                    </div>
                                    <div class="order__tax order-label_flex-block">
                                        <div class="tax__label form__label order-label_flex">Tax</div>
                                        <div class="tax__value form__label order-label_flex">$1.91</div>
                                    </div>
                                    <div class="order__gst order-label_flex-block">
                                        <div class="gst__label form__label order-label_flex">GST(10%)</div>
                                        <div class="gst__value form__label order-label_flex">$1.91</div>
                                    </div>
                                    <div class="order__order-total order-label_flex-block">
                                        <div class="order-total__label form__label order-label_flex">Order Total</div>
                                        <div class="order-total__value form__label order-label_flex">$13,068.00</div>
                                    </div>
                                </div>
                                <div class="order__pay">
                                    <div class="order__checkout">
                                        <input type="submit" value="Proceed to Checkout">
                                    </div>
                                    <div class="order__checkout-paypal">
                                        <input type="submit" value=" Check out with">
                                        <img src="/img/GroupsvgPP.svg" alt="paypal-ico">
                                    </div>
                                    <div class="order__checkout-adresses">
                                        <input type="submit" value="Check Out with Multiple Addresses">
                                    </div>
                                    <div class="order__learn-more">
                                        <div class="order__learn-more-text"><strong>own</strong> it now, up to 6 months
                                            interest
                                            free <span class="learn_underline">learn more</span>
                                        </div>
                                    </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


        
        <div class="customer-login__container">
            <div class="customer__registration">
                <div class="registration">
                    <div class="registration__heading">
                        <div class="registration__title">Registered Customers</div>
                        <div class="registration__sub-title">If you have an account, sign in with your email address.
                        </div>
                    </div>
                    <div class="registration__form">
                        <div class="forms__registration">
                            <form action="contact.php" method="post" enctype="multipart/form-data">
                                <label for="email">Email</label>
                                <input required type="email" name="email" id="email" placeholder="Your name">
                                <label for="Password">Password</label>
                                <input type="password" name="password" id="password" placeholder="Password">

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

Answer 1

ПОЧЕМУ .customer-login__container находиться в .block__contact.

Если посмотреть на скрин, вы сами так сделали

Answer 2

Нашёл 2 пропущенных в контейнере block__contact до тега Видимо браузер сам криво косо закрыл тэги

БЛОГ НА HUSL

Почему customer__container лежит внутри другово контейнера, но в коде раздельно

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