Send email and cancel button is not aligned horizontally

Hello all,

I have been trying to aligned 2 buttons ( i-e send email , cancel button ) horizontally in the same row but no luck yet… Can someone please help me out… attaching an image for a reference:

here’s my code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
  <div class="containerbackground">
    <h1>CLARITAS</h1>
    <p>DATA PROTECTION SIMPLIFIED.</p> 
  </div>
    <div class="header_area">
        <div  class="main-menu">
          <img src="./wire2-removebg-preview.png" alt="About us" class="img-fluid">
          </div>
          <h2>CLARITAS</h2>
          
          <div class="para">
          <p>Claritas uses technology to provide prioritized risk insights,which translates into simplified data protection.</p>
        </div>
         <div class="value">
        </div>
         </div>
      
      <div class="form-area">
        <form action="/">
          <div class="banner">
            <h1>Reset your Password.</h1>
            <h4>Enter  your email address in order to reset your password for Claritas.</h4>
          </div>
             <div class="colums">
            <div class="item">
              <label for="emailaddress"> Email Address<span>*</span></label><br>
              <input id="emailaddress" type="text" placeholder=" Enter Email Address" name="emailaddress" required/>
            </div>
            <br>
            <label for="check">
              <div class="input-container">
                <input type="checkbox" class="checkbox" id="check">
                <span class="checkbox-text">I'm not a robot</span>
              </div>
            </label>
            <img class="image-logo" src="./logo_48.png"/>
         <span class="recaptcha">reCAPTCHA</span>
       <br>
      <a href="#">Privacy</a>
      <span class="dash">-</span>
      <a href="#">Terms</a>

      </div>
      <div class="row">
        <button class="sendemail" type="sendemail"  data-inline="true" href="/"> send Email</button>
      <button  class='cancel' data-inline="true" type="cancel" href="/">Cancel </button>
      
    </div>
        </form> 
</body>
</html>
body{
   background-color: #ECE6E7;
}

.header_area{
    height: 630px;
    width: 590px;
    display: block;
    margin-left: 180px;
    margin-top: 65px;
    background-color: white;
    border-radius: 15px;
}

.main-menu {
    padding: 1.4rem 1.2rem auto ;
    height: 370px;
    width: 440px;
    display: block;
    /*margin-left: 91px; */
    /* margin-bottom: 56px; */
  /*  margin-top: 40px; */
    border-radius: 20px;
    position: absolute; /*Can also be `fixed`*/
    left: -85px; 
    right: 790px;
    top: -49px;
    bottom: 225px;
    margin: auto;

    }

.form-area{
  height: 630px;
    width: 590px;
    display: block;
    margin-left: 775px;
    margin-bottom: 975px;
    background-color: #FFFAFA;
    border-radius: 15px;
    position:relative;
    top: -630px;
}
.img-fluid 
{
   /*width: 20px;
  height: 35px;
  top: 0;
   bottom: 200px; 
   margin: auto; */
   margin-left: 108px;
  margin-top: 35px;
  opacity: .5rem;

} 

 div, form,  input, select, textarea, label { 
  padding: 0;
  margin: 0;
  outline: none;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 22px;
  }
.colums {
    display:row;
    justify-content: space-between;
    flex-direction:row;
    flex-wrap:wrap;
    margin-left: 40px;
   
    }
    .colums div {
    width:48%;
    border-radius: 10px;
    }

    .item {
      position: relative;
      margin: 35px 5px;
      margin-right: 6px;
      display: inline;
      border-color: #ECE6E7 ;
      /*-moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      -khtml-border-radius: 6px; */
       border-radius:6px;
       border-collapse: separate;
      
      }
      .item span {
      color: red;
      }
      #emailaddress{
        border: 1px solid #ccc;
        border-radius: 10px;
        width: 80%;
        height: 35px;
      }

   /* textarea {
    width: calc(100% - 12px);
    padding: 5px;
    }

   /* form {
    width: 100%;
    padding: 20px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0 8px  #669999; 
    } */

    .item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder {
      color:  #669999;
      }
      .item input:hover, .item select:hover, .item textarea:hover {
      border: 1px solid transparent;
      box-shadow: 0 0 3px 0  #669999;
      color: #669999;
      }

.banner{
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  margin-left: 2px;
  padding: 29px;
  bottom: -2px;
}
h4{
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  margin-left: 3px;
  padding-bottom: 5px;
  margin-bottom: 6px; 
  top: -10px; 
 /* bottom: 10px; */
  }
  /*.checkbox {
    margin-bottom: 12px;
    margin-left: -20px;
    padding: 25px;
    }*/

    .sendemail {
      width: 35%;
      padding: 10px 0;
      margin: 10px auto;
      border-radius: 5px; 
      border: none;
      background: #ECE6E7; 
      font-size: 12px;
      font-weight: 550;
      color: black;
      margin-left: 350px;
      margin-top: -15px;
      bottom: -12px;
      }
      .cancel {
        width: 35%;
        padding: 10px 0;
        margin: 10px auto;
        border-radius: 5px; 
        border: none;
        background: #ECE6E7; 
        font-size: 12px;
        font-weight: 550;
        color: black;
        margin-left: 110px;
        
        margin-top: -45px;
        
        }
        .row{
          display: inline-block;
        }
      
      button:hover {
      background: plum;
      }
      .checkbox input {
        width: auto;
        margin: -5px 15px 5px 5px;
        }
        .input-container {
          background-color: rgb(249, 249, 249);
          border: 1px solid #d3d3d3;
          height: 74px;
          width: 300px;
          font-family: Roboto, sans-serif;
          display: inline-block;
          margin: 55px;
          bottom: -15px;
          padding:15px;
        }

        .image-logo {
          width: 32px;
          display: inline;
          margin-right: -45px;
          margin-left: -150px;
          margin-top: 10px;
          margin-bottom: -19px;
        }
        
        span, a {
          color: rgb(155, 155, 155);
        }
        
        .recaptcha {
          font-size: 12px;
          margin-left: auto;
          position: relative;
          bottom: -35px;
        }
        a, .dash {
          font-size: 8px;
          text-decoration: none;
          display: inline;
          position: relative;
          top: -93px;
          right: -250px;
        }
        a:hover {
          text-decoration: underline;
        }
        .value {
          border-left: 6px solid #F08080;
          height: 80px;
          margin-bottom: 100px;
          padding-top: 50px;
          margin-top: 100px;
          margin-left: 35px;
           top : -10px;
          position: relative;
          
        }
        .para{
          margin-bottom: 40px;
          padding-top: 100px;
          margin-top: 390px;
          margin-left: 50px;
          text-decoration: black;
          font-size: 15px;
          font-weight: 550;
          bottom: 100px;
          position: relative;
          font-family: Georgia, 'Times New Roman', Times, serif;
        }
        .containerbackground{
          margin-top: -25px;
          margin: 3rem;
            position: absolute;
            top: -59px;
            left: 15px;
            margin-right: 15px;
            bottom: 0;
            z-index: -1;
        }

Please post live examples on Codepen (or wherever).


Not sure why .row is inline-block or why you have the margins you do on the buttons.

This layout would be much easier if you just used flexbox on the container and gave the buttons the same class.

<div class="form-buttons">
  <button class="btn" type="sendemail" data-inline="true" href="/">Send Email</button>
  <button class="btn" data-inline="true" type="cancel" href="/">Cancel</button>
</div>
.form-buttons {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.btn {
  width: 35%;
  padding: 10px 0;
  border-radius: 5px;
  border: none;
  background: #ece6e7;
  font-size: 12px;
  font-weight: 550;
  color: black;
}