Ho il seguente form HTML:

codice HTML:
<!DOCTYPE html>
<html lang="it"><head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>html5 forms</title>    
<link rel="stylesheet" href="style.css">
</head>
<body>    
<section id="main">    
<form action="#" method="POST">       
<h1>PLEASE, REGISTER</h1>       
<div class="form-group">            
        <label for="name">Firstname</label>             
          <input title="insert your firstname" required maxlength="60" size="120"   placeholder="Insert your name"  pattern ="[a-zA-Z]+" type="text" id="name" name="name">       
</div>       
<div  class="form-group">        
         <label for="name">Lastname</label>         
                    <input   type="text" placeholder="Insert your lastname" id="lastname" name="lastname">       </div>       
<div  class="form-group">        
      <label>European citizen?</label>           
      YES <input   type="radio"  value="Y" checked name="europeancitizen">          
       NO  <input   type="radio"  value="N" name="europeancitizen">       
</div>        
<div  class="form-group">        
   <label>Hobbies</label>         
    Traveling<input name="hobbies[]" value="travel"  type="checkbox">        
    Guitar<input name="hobbies[]"  value="guitar"  type="checkbox">        
    Computers<input name="hobbies[]"  value="computer"  type="checkbox">       
</div>       
<div  class="form-group buttons">                
            <button  type="reset"> Reset</button>           <button> Send data</button>                              </div>    
</form>    
</section>
</body>
</html>
Il problema che ho è che i due ultimi DIV risultano essere sfasati rispetto agli altri. Come posso risolvere il problema?

Grazie!
tulipan