Proportion of container in the header

[netninja25253]

<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://codecademy.com/courses/web-ext/projects/html-css-prj_innovation-cloud

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>

A proportion of container inside header is weird as below.

I’d like to make my code looks like this.

I tried

  center : fixed;
  background-size: cover;

Just like I did on Broadway project, but the result was not what I intended.

Is it also something about Bootstrap? Do you recommend me to move on until I learn more?

Also, I’d appreciate if there is any way I can see CSS code with Firebug on Chrome.

Here is my CSS.

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


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

Thanks in advance!

[zystvan]

Hey @netninja25253,

I’d like to make my code looks like this

There’s very little difference between the two images you’ve posted. What specifically do you want to change?

In order to make your code match the objective best, you could start by decreasing the font-size for the main header, then increasing the letter-spacing for the subheader.

Also, center: fixed; doesn’t exist. I think you’re might want position: fixed;?

[netninja25253]

Thanks! @zystvan

I adjusted font size and margin to fit background image.
center: fixed; → I fetched this one from other person’s question I guess…
Thank you for information!

My code looks little bit weird but the result is fine

.header {
  height: 1200px;
  text-align: center; 
  background :url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg);
  margin: -400px 0 0 0;
  background-size: cover;
}

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