私はHTMLコードでログインページを設計しました。ログインするにはコンテナやボックスを追加するには？

Question

私はコンテナを宣言しましたが、左余白にテキストボックスが添付されています。どのようにそれを解決するには？あなたは混乱のビットである必要がありそれは何

<section class="container">     
 
         
 
     <br> 
 
      <section class="container"> 
 

 
      <div style="width:300px;height:300px;border:2px solid #dddddd;"> 
 
        <div class="s-4 l-10"><br><br> 
 
        <h4>User Login</h4><br> 
 
        <div class="customform" > 
 
        <div id="mail-status"></div>  
 
     <form class="form-signin" method="post" id="login-form" action=""> 
 
     <div class="s-12 l-14"> 
 
     <h5>User ID</h5><br> 
 
     <input type="text" id="email" class="masked" name="email" /></div> 
 
\t <span id="check-e"></span> 
 
     <div class="s-12 l-14"><br> 
 
     <h5>Password</h5><br> 
 
    <input type="password" id="password" class="masked" name="password" /> 
 
\t <span id="check-e"></span> 
 
\t <div id="error"></div> 
 
    </div> 
 
    
 
     <div class="s-6 l-12"> 
 
     <button type="submit" id="btn-login" name="btn-login" style="width: 100px; float: right; onClick="submit">Login</button> 
 
     </div>

Answer 1

助けてください。ここでは、単純なバージョンは、最小限のマークアップとCSSで、だ

.container { 
 
    border: 1px solid black; 
 
    padding: 1em; 
 
    max-width: 10em; 
 
    } 
 
h4 { 
 
    text-align: center; 
 
    } 
 
label { 
 
    margin-top: 1em; 
 
    font-weight: bold; 
 
    display: block; 
 
    } 
 
button { 
 
    display: block; 
 
    max-width: 4em; 
 
    margin: .5em auto; 
 
    }

<section class="container">     
 
    <h4>User Login</h4> 
 
    <label for="username">Username</label> 
 
    <input type="text" id="username" name="username"><br> 
 
    <label for="password">Password</label> 
 
    <input type="password" id="password" name="password"><br> 
 
    <button type="submit" id="btn-login" name="btn-login">Login</button> 
 
</section>