Unable to style the button-CodePudding

I want to style the button element named "btn2" which is second button in my website. I tried to align the button to center by margin left:85vh, but it is not positioning exact middle of the page. I also want to adjust the top padding of the same button. There is more gap between my btn2 and h2 element (Train your app with Lobe). I want to align the padding between h2 and btn2. Kindly fix these two issues

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header {
  width: 100%;
}

.header .container {
  display: flex;
  justify-content: space-between;
  margin: 30px;
}

.container a {
  text-decoration: none;
  margin-right: 100px;
  margin-left: 60px;
  letter-spacing: 3px;
  font-size: 15px;
}

.container .main-btn {
  background-color: #04ddb2;
  width: 80px;
  height: 40px;
  margin-right: 16px;
  border-radius: 8px;
  border: none;
}

.main .mainbody {
  font-size: 35px;
  color: #333;
  text-align: center;
  padding: 70px;
}

.main .mainbody span {
  color: #04ddb2;
}

.main .mainbody p {
  font-size: 25px;
  text-align: center;
}

.main .video {
  margin-left: 62vh;
}

.main .body2 h2 {
  font-size: 30px;
  color: #333;
  text-align: center;
  padding: 50px;
}

.body2 .btn2 {
  margin-left: 85vh;
}

.body2 .btn2 {
  background-color: #04ddb2;
  width: 200px;
  height: 70px;
  border-radius: 5px;
  border: none;
  font-size: 20px;
  color: #ffff;
}

<!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="style.css">
</head>

<body>
  <header>
    <div >
      <nav>
        <img src="./img/logo.png">
        <a href="#">Overview</a>
        <a href="#">Examples</a>
        <a href="#">Tour</a>
        <a href="#">Blog</a>
        <a href="#">Help</a>
        <button >Download</button>
      </nav>
    </div>
  </header>
  <section >
    <div >
      <h1>Lobe <span>Tour</span></h1>
      <p>Build your first machine learning model in ten<br> minutes. No code or experience required.</p>
    </div>
    <div >
      <iframe width="560" height="315" src="https://www.youtube.com/embed/ly36kn0ug4k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div >
      <h2>Train your app
        <br>with Lobe</h2>
      <button >Download</button>
    </div>
  </section>
</body>

</html>

CodePudding user response：

I think if you go to flexbox approach it will be very easy to you to align the elements anywhere. flexbox

1- For aligning the button and h2 in the center you can use this code after you delete the margin 85vh:

.main .body2 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

2- for the gap between the button and h2 you have set padding in all directions so I think you should use padding in h2 in this way:

padding: [top value] [right value] [bottom value] [left value]

for example:

padding: 50px 50px 10px 50px;