Vertical centering, white space and button on the same line

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/en/courses/web-ext/projects/html-css-prj_move?link_content_target=interstitial_project

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
Hi,
I’m stuck on this project. Everything is just fine except I don’t know how to center the headings (on the images) vertically (horizontally it’s ok). The second problem is there is a white band between the first black menu and the rugby image with text Move.Rest.Recover.Move and in the section that says Go Premium, the button is on the same line with the paragraph. Can you advise me how to fix these things please?
THANK YOU

```

<!doctype html>

<div class="main">
  <div class="container">
   <h1>
     MOVE
    </h1> 
    <p>
      Form healthy habits to take your fitness to the next level.
    </p>
    <a href="start.html" class="btn">START NOW</a>
  </div>
</div>

<div class="supporting">
  <div class="container">
    <div class="col">
      <h2>MOVE</h2>
      <p>Become more active by tracking your runs, rides, and walks.</p></div>
    <div class="col">
      <h2>
        SYNC
      </h2>
      <p>
        Access your activity on your phone, tablet, or computer.
      </p></div>
    <div class="col">
      <h2>
        COMPETE
      </h2>
      <p>
        Set personal challenges and see how you rank against your friends.
      </p></div>
    </div>
    
    
    <div class="clearfix">
  </div>
</div>


<div class="feature">
  <div class="container">
    <h2>
      MOVE. REST. RECOVER. MOVE.
    </h2>
  </div>
</div>
<div class="supporting">
  <div class="container">
    
      
   
      <h2>
        GO PREMIUM
      </h2>
      <p>
        Receive recommendations based on your activity to level up.
    </p>
      <a href="premium.html" class="btn">LEARN MORE</a>
   
  </div>
</div>
<div class="footer">
  <div class="container">
    <h2>
      STOP SCROLLING. START MOVING
    </h2>
    <a href="move.html" class="btn">START NOW</a>
  </div>
</div>

html, body {
margin: 0;
}

h1, h2, a {
font-family: ‘Oswald’, sans-serif;
}

p {
font-family: Helvetica, Arial, sans-serif;
}

.container {
width: 940px;
margin: 0 auto;
}

/* Main */
.main {
height: 600px;
background: url(https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg) center center no-repeat;
background-size: cover;
color: white;
text-align: center;
padding-top: 0.01px;
}

.main .btn {
background-color: black;
color: white;
text-decoration: none;
padding: 10px 20px 10px 20px;

}

.main h1 {
font-size: 150px;
padding-top: 120px;
position: relative;
margin:0px;
}

.main p {
font-size: 18px;
}

/* Supporting */
.supporting {
text-align: center;
padding: 50px 0 80px;
background-color: #1c1c1c;
}

.supporting .col {
float: left;
width: 28%;
padding: 10px;
display: inline;
}

.supporting h1,
.supporting h2 {
color: #ffa800;
font-size: 20px;
margin: 0px;
}

.clearfix {
clear: both;
}

.supporting p {
color: #efefef;
margin-bottom: 20px;
line-height: 20px;
font-size: 12px;
display: inline;
}

.supporting .btn {
background-color: #eee;
color: #1c1c1c;
font-size: 18px;
padding: 8px 30px;
text-decoration: none;
}
/* Feature */
.feature {
height: 600px;
background: url(https://s3.amazonaws.com/codecademy-content/projects/move/feature.jpg) center no-repeat;
background-size: cover;
text-align: center;
}

.feature h1,
.feature h2 {
color: #fff;
font-size: 40px;
padding: 0px;
}

/* Footer */
.footer {
height: 600px;
background: url(https://s3.amazonaws.com/codecademy-content/projects/move/footer.jpg) center no-repeat;
background-size: cover;
text-align: center;
}

.footer .btn {
background-color: black;
color: white;
text-decoration: none;
padding: 10px 20px 10px 20px;
}

.footer h1,
.footer h2 {
color: #fff;
font-size: 40px;
margin: 0 0 20px 0;
padding:50px 0 0;
}

.footer p {
color: #fff;
margin: 0 0 20px 0;
font-size: 18px;
}

@media (min-width:600px) {
.main h1 {
font-size: 200px;
}

.supporting .col {
width: 30%;
}

.supporting h2 {
font-size: 40px;
}

.supporting p {
font-size: 14px;
}

.feature h2 {
font-size: 60px;
}
}

<do not remove the three backticks above>

Remove any padding, to fix the white bar issue. I had a huge white gap at the top that still cannot explain.

ON .main

margin-top: -135px;

ON .main h1

position: relative;
top: 120px;

I did this project a long time ago but had to do it all over again to try to reproduce your issue. Sorry I can’t give a formal answer.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.