仕切りの枠線の高さの枠線を作成するにはどうすればいいですか？

Question

私はウェブサイトのログインページを作成しようとしています。https://essaydapp.comを提出してアプリケーションに入れようとしています。私は自分のデザインを模倣しようとしている（リンクを参照）が、私はいくつかの問題を抱えている：

スクリーンショット：最初のスクリーンショットで

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

をあなたは小さな1pxの破線のボーダーを見ることができます、私はそれがフォームだけではなくページ全体の高さであることを望みます。 2番目のスクリーンショットでは、ページの端に白い色が表示されますが、青色にすることもできます。

事前に助けていただきありがとうございます。

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

既存のコードは多少乱雑です。代わりに、私は

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

このコードは、左右からの任意のパディングを削除します。 私はそれがあなたが欲しいものだと願っています。

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