Wie erstellt man einen vollen Seitenrand für den Teiler?

Question

Ich versuche, eine Anmeldeseite für eine Website zu erstellen, https://essaydapp.com, um zu senden und zu versuchen, und in die Anwendung zu gelangen. Ich versuche, ihr Design (siehe Link) zu imitieren, aber ich habe einige Probleme:

Screenshots:

1. https://imgur.com/w2GAphF
   
2. https://imgur.com/rimWY0s
   

Im ersten Screenshot Sie können den kleinen 1px gestrichelten Rand sehen, ich möchte, dass dies die Höhe der gesamten Seite und nicht nur der Form ist. Im zweiten Screenshot können Sie sehen, an den Rändern der Seite und oben gibt es die weiße Farbe, aber ich möchte das auch blau sein.

Danke für jede Hilfe im Voraus.

form { 
 
    /*border: 10px solid #1acebc;*/ 
 
    padding: 28px; 
 
    border-left: 1px solid black; 
 
    border-left-style: dashed; 
 
    border-right: 1px solid black; 
 
    border-right-style: dashed; 
 
} 
 

 
button:hover { 
 
    opacity: 0.8; 
 
} 
 

 
button { 
 
    background-color: #09c; 
 
    color: white; 
 
    padding: 14px 20px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 100%; 
 
} 
 

 
input[type=text], 
 
input[type=password] { 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    display: inline-block; 
 
    border: 1px solid #1acebc; 
 
    box-sizing: border-box; 
 
} 
 

 
img { 
 
    display: block; 
 
    margin: 0 auto; 
 
    padding-bottom: 60px; 
 
    padding-top: 30px; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
body { 
 
    background-color: #e7f3f6; 
 
    /*border-left: 250px solid #007da5; 
 
    border-right: 250px solid #007da5;*/ 
 
    border-left: 175px solid #007da5; 
 
    border-right: 175px solid #007da5; 
 
    padding-top: 175px; 
 
    padding-bottom: 215px; 
 
}

<form> 
 
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="profilepicture"> 
 
    <input type="text" placeholder="Username"> 
 
    <input type="password" placeholder="Password"> 
 
    <button type="button" name="Login">Login</button> 
 
</form>

Answer 1

Ihr bestehender Code ist etwas chaotisch. Stattdessen schlage ich vor, die folgende Flex-Box-Lösung

body { 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    background-color: #007da5; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
form { 
 
    display: flex; 
 
    width: 75%; /*Set the width required*/ 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background-color: #e7f3f6; 
 
    border-left: 1px dashed black; 
 
    border-right: 1px dashed black; 
 
} 
 

 
img { 
 
    width: 300px; 
 
    height: 300px; 
 
    padding-bottom: 60px; 
 
    padding-top: 30px; 
 
} 
 

 
button:hover { 
 
    opacity: 0.8; 
 
} 
 

 
button { 
 
    background-color: #09c; 
 
    color: white; 
 
    padding: 14px 20px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 85%; 
 
} 
 

 
input[type=text], 
 
input[type=password] { 
 
    width: 85%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    display: inline-block; 
 
    border: 1px solid #1acebc; 
 
    box-sizing: border-box; 
 
}

<form> 
 
    <img src="https://i.imgur.com/ihZBCxx.png" alt="profilepicture"> 
 
    <input type="text" placeholder="Username"> 
 
    <input type="password" placeholder="Password"> 
 
    <button type="button" name="Login">Login</button> 
 
</form>

Answer 2

Dieser Code entfernt jegliche Polsterung von links und rechts. Ich hoffe, dass Sie das wollen.

body{ 
    border: 1px dashed; 
    backgroud-color: #e7f3f6; 
    margin-left: 0px; 
    margin-right: 0px; 
}