Vertical centering, white space and button on the same line


#1


https://www.codecademy.com/en/courses/web-ext/projects/html-css-prj_move?link_content_target=interstitial_project


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>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
  </head>
  <body>

    <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>

  </body>
</html>


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;
  }
}


#2

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.


#3

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