无法以格式放置文本

Question

我是Web开发的初学者。我正在工作，我有一个表格，当我填写该表格时，我将继续进行该过程的下一步。但是，当我希望将其放置在其下方的右侧时，下一步的标题将远远低于我制作的表单。我的代码：

.form-area{

display:block;
position:relative;
left:50%;
margin-top:270px;
transform:translate(-50%,-50%);
width:500px;
height:550px;
box-sizing:border-box;	
background:rgb(0,0,0,0.5);
padding:40px;	
border-radius:50px;	
	
}


#step3{
	
position:relative;
margin-top:0px;	
text-align:left;
	
}	

<div class = "form-area" id = "forma">  //my form 
 
 <form  class = "sign-form" > 
  
   <div class = "form-container">
  
        <h1> Enter purchase data below : </h1>   
  
        <label for "dieythinsi" >  Address Name</label>
           <input type = "text" placeholder = "Enter address name " id = "address" name = "addr" required/> 
		</label>
   
  
  
        <label for "arithmos-dieyth" >  Address Number</label>
           <input type = "text" placeholder = "Enter address number " id = "address-num" name = "addnum" required/> 
        </label>

  
        <label for "perioxi" > Region </label>
		
          <input type = "text" placeholder = "Enter region "id = "region" name = "reg" required/> 
        </label>
  
        
        <label for "taxidromikos"> Postal Code</label>
            <input type = "text"  placeholder = "(5 digit number)"  id = "postal-code" name = "postcode" required/> 
        </label>
		
		<div id = "delivery-expenses">
		    
			Delivery Expenses at 2$
		
		</div>
		
     	<div id ="express-delivery">
	      <span id = "e-text">Express Delivery ? (+6$) (if total purchase more than 30$ then it's free !)</span><input type="checkbox" id = "exp-box" value="express" onclick="expressfunc()" id="e-delivery">
        </div>
  
   </div>
   
       <button type = "button" id = "c" class = "cancelbtn"  onclick = "goback()">Go back</button> 
       <button  type = "button" id = "n" class="continuebtn" onclick = "return checkdata()">Next</button>
    
	
  
  </form>
 
 </div>
 
 //the text under the form that I want to position left and close to the form 
 
   <h1 id = "step3"> Step 3 : Select way of payment to finish. </h1>  <br/>

[感谢您提供的帮助我解决该问题的指导。先感谢您 。 （如有任何澄清，请随时询问）

Answer 1

间距是由于CSS中的transform规则引起的。

我删除了它，并为该块添加了自动补距以使其水平居中显示

.form-area{

display:block;
position:relative;
margin:270px auto 0;
width:500px;
height:550px;
box-sizing:border-box;	
background:rgb(0,0,0,0.5);
padding:40px;	
border-radius:50px;	
	
}


#step3{
	
position:relative;
margin-top:0px;	
text-align:left;
	
}	

<div class = "form-area" id = "forma">  //my form 
 
 <form  class = "sign-form" > 
  
   <div class = "form-container">
  
        <h1> Enter purchase data below : </h1>   
  
        <label for "dieythinsi" >  Address Name</label>
           <input type = "text" placeholder = "Enter address name " id = "address" name = "addr" required/> 
		</label>
   
  
  
        <label for "arithmos-dieyth" >  Address Number</label>
           <input type = "text" placeholder = "Enter address number " id = "address-num" name = "addnum" required/> 
        </label>

  
        <label for "perioxi" > Region </label>
		
          <input type = "text" placeholder = "Enter region "id = "region" name = "reg" required/> 
        </label>
  
        
        <label for "taxidromikos"> Postal Code</label>
            <input type = "text"  placeholder = "(5 digit number)"  id = "postal-code" name = "postcode" required/> 
        </label>
		
		<div id = "delivery-expenses">
		    
			Delivery Expenses at 2$
		
		</div>
		
     	<div id ="express-delivery">
	      <span id = "e-text">Express Delivery ? (+6$) (if total purchase more than 30$ then it's free !)</span><input type="checkbox" id = "exp-box" value="express" onclick="expressfunc()" id="e-delivery">
        </div>
  
   </div>
   
       <button type = "button" id = "c" class = "cancelbtn"  onclick = "goback()">Go back</button> 
       <button  type = "button" id = "n" class="continuebtn" onclick = "return checkdata()">Next</button>
    
	
  
  </form>
 
 </div>
 
 //the text under the form that I want to position left and close to the form 
 
   <h1 id = "step3"> Step 3 : Select way of payment to finish. </h1>  <br/>