-1

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 class="container">
      <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 class="main-btn">Download</button>
      </nav>
    </div>
  </header>
  <section class="main">
    <div class="mainbody">
      <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 class="video">
      <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 class="body2">
      <h2>Train your app
        <br>with Lobe</h2>
      <button class="btn2">Download</button>
    </div>
  </section>
</body>

</html>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Najad
  • 107
  • 8
  • You need to [edit] your question and reduce the code to a [mre]. If I click "Run code snippet" it shows broken images and lots of unrelated text. – Stephen Ostermiller Aug 15 '22 at 19:18
  • Why would adding `margin-left: 85vh;` center the button? You're telling the browser to add a margin that is 85% of the height of the viewport to the left of the element. I don't see that as a successful strategy for centering a button horizontally. If you were to set both the left and right margins to `auto`, however, as mentioned in the answers to [How can I horizontally center an element?](https://stackoverflow.com/q/114543/215552), you might have more luck. – Heretic Monkey Aug 15 '22 at 19:25

1 Answers1

0

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;
Hassan
  • 66
  • 4