How do i put a button on the same line as text? HTML

Question

This is the code. I just started HTML yesterday so I am a beginner.

Body {  
  font-family: Calibri, Helvetica, sans-serif;  
  background-color: white; 
}  
button {   
       background-color: white;   
       width: 100%;  
        color: black;   
        padding: 15px;   
        margin: 10px 0px;   
        border: 3px solid #810020;   
        cursor: pointer;
         }   
 form {   
        border: 3px solid #1c1c1c;   
    }   
 input[type=text], input[type=password] {   
        width: 100%;   
        margin: 8px 0;  
        padding: 12px 20px;   
        display: inline-block;   
        border: 2px solid black;   
        box-sizing: border-box;   
    }  
 button:hover {   
        opacity: 0.7;   
    }   
  .btn {   
        width: auto;   
        padding: 10px 18px;  
        margin: 10px 5px;       
    }   
        
     
 .container {   
        padding: 25px;   
        background-color: #CA302D;  
    }   

<center>
    <h1><b>Home</b></h1>
</center>
<button type="button" class="btn"><a href="signup.html"> <b>Sign Up</b> </a></button>
<button type="button" class="btn"><a href="login.html"> <b>Log In</b> </a></button> 

I've tried using inline-block and all but I think I was using it wrong. I am trying to create a webpage but google sites didn't let me add a login page so I had to use HTML.

Answer 1

wrap your elements with a div and use flex to get them in the same line

Body {  
  font-family: Calibri, Helvetica, sans-serif;  
  background-color: white; 
}  
button {   
       background-color: white;   
       width: 100%;  
        color: black;   
        padding: 15px;   
        margin: 10px 0px;   
        border: 3px solid #810020;   
        cursor: pointer;
         }   
 form {   
        border: 3px solid #1c1c1c;   
    }   
 input[type=text], input[type=password] {   
        width: 100%;   
        margin: 8px 0;  
        padding: 12px 20px;   
        display: inline-block;   
        border: 2px solid black;   
        box-sizing: border-box;   
    }  
 button:hover {   
        opacity: 0.7;   
    }   
  .btn {   
        width: auto;   
        padding: 10px 18px;  
        margin: 10px 5px;       
    }   
        
     
 .container {   
        padding: 25px;   
        background-color: #CA302D;  
    }   
    
    .flex{
    display:flex;
    justify-content:center;
    align-items:center;
    }

<div class="flex">

<center>
    <h1><b>Home</b></h1>
</center>
<button type="button" class="btn"><a href="signup.html"> <b>Sign Up</b> </a></button>
<button type="button" class="btn"><a href="login.html"> <b>Log In</b> </a></button> 

</div>