Tea Cozy Project

Hello, I am wondering how can I achieve the below image effect?
The code for the below two Pic is the same, I don’t understand why can’t achieve the same effect.

Ideal:

Reality:

body {

font-family: Helvetica;

font-size: 22px;

color: seashell;

background-color: black;

opacity: 0.9;

display: flex;

flex-direction: column;

align-items: center;

}

#header {

top: 0;

height: 69px;

width: 100%;

position: fixed;

border-bottom: 1px solid seashell;

align-items: center;

display: inline-flex;

justify-content: space-between;

z-index: 10;

background-color: black;

opacity: 0.9;

}

#logo {

margin-left: 10px;

height: 50px;

opacity: 0.9;

}

.navlist {

text-decoration: underline;

display: inline-flex;

justify-content: space-between;

margin-right: 20px;

}

.mission {

background-color: black;

width: 100%;

height: 50px;

opacity: 1;

display: flex;

justify-content: center;

align-items: center;

color: #C4BDB8;

}

#mission-container {

display: flex;

position: absolute;

margin-top: 62px;

background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg");

height: 700px;

width: 1200px;

background-size: cover;

flex-direction: column;

opacity: 0.9;

justify-content: center;}

One thing that really helped with that project was using the developer tools. You can instantly see the difference in properties and get to understand it much better. specially where the wrap is supposed to be.

Actually I am using the visual studio, but I can’t achieve the effect of the 1st image using the same code…

I use sublime text and chrome, but the developer tools I am talking about are in the browser,


.mission {
width: 1200px;
height: 700px;
margin: 0px 150px 0px 150px;
background-image: url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg);
position: relative;
top: 100px;
flex-direction: column;
justify-content: center;
}

h1 {
background-color: black;
height: 5rem;
color: seashell;
opacity: .8;
display: flex;
align-items: center;
justify-content: center;
font-size: xxx-large;
}

h4 {
background-color: black;
height: 5rem;
color: seashell;
opacity: .8;
display: flex;
align-items: center;
justify-content: center;
}

I think you should give your html code so that we can figure out what’s wrong here.
Or you should use the chrome dev tools for modifications in your code.
Although I love coding in ATOM.