<header> <h1> is stuck on the top of website. How could I align it to center?

#1

I'm trying to make exactly same website as given example.
My h1 is stuck on the top of website and doesn't come down :smiley:

cloud.jpg1894x844 197 KB

  1. How to place h1 in the middle of background image?

*HTML

<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="header">
        <h1>
          Innovation<br> 
          cloud
        </h1>
        <p>
          connect your idea globally
        </p>
        <a class = btn href ="#">Learn More</a>
      <div class="container">
         
      </div>
    </div>

*CSS

/* Header */
.header {
  height: 800px;
  text-align: center; 
  background :url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg);
}

.header .container {
	position: relative;
	top: 200px;
}

.header h1 {
	font-size: 80px;
	line-height: 100px; 
	margin-top: 0px;
	margin-bottom: 80px;
  color: white;
  text-transform: uppercase;
}

@media (min-width:850px) {
	.header h1 {
		font-size: 120px;
	}
}

Thank you!

#2

oh I got it. I should have put h1 and p under container.
Here is my fixed code. Thanks.

 <body>
    <div class="header">
      <div class="container">
          <h1>
          Innovation<br> 
          cloud
        </h1>
        <p>
          connect your idea globally
        </p>
        <a class = btn href ="#">Learn More</a>
      </div>
    </div>
#3

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