Tea Cozy - Need Help

Hi guys,

I am nearly finished with the Tea Cozy project but I am struggling with the ‘Our Mission’ banner. I would like it to stick to its place when the width of the screen changes. Also, when i’m seeing it in iphone view in dev tool, it does not display in the right place and i don’t understand why.
If you see any other improvements on other parts of the website, please feel free to tell me.
Thanks a lot.
Here it is :

<link href="/Users/AlexandreSudaka/Documents/Freelance Web/Projects/Tea Cozy/style.css" type="text/css" rel="stylesheet">

<title>Tea Cozy</title>
                <!--HEADER-->

<header>
    <img src='https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png' alt="Tea cozy logo"> 

    <nav>

        <a href="#mission">Mission</a>

        <a href="#tea">Featured Tea</a>

        <a href="#locations">Locations</a>

    </nav>

</header>

<main>


                <!--Our Mission-->

<div id='mission'>
    <img src='https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg'>
    <div class='mission-title'>
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
    </div>
</div>

                 <!--Tea of the month-->

<div id="tea">
    <h2>Tea of the Month</h2>
    <h4>What's Steeping at the Tea Cozy?</h4>

    <div class='tea-img'>

        <figure><img src='https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg' alt='Fall Berry Blitz Tea'> 
        <figcaption>Fall Berry Blitz Tea</figcaption>
        </figure>

        <figure><img src='https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg' alt='Spiced Rum Tea'> 
        <figcaption>Spiced Rum Tea</figcaption>
        </figure>

        <figure><img src='https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg' alt='Seasonal Donuts'> 
        <figcaption>Seasonal Donuts</figcaption>
        </figure>

        <figure><img src='https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg' alt='Myrtle Ave Tea'> 
        <figcaption>Myrtle Ave Tea</figcaption>
        </figure>

        <figure><img src='https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg' alt='Bedford Bizarre Tea'> 
        <figcaption>Bedford Bizarre Tea</figcaption>
        </figure>

    </div>
</div>


                    <!--Locations-->

<div id='locations'>
    <h2>Locations</h2>
    
    <div class='adresses'>
        
        <div class='dowtown'>
        <h3>Downtown</h3><br>
        <p>384 West 4th St <br><br> Suite 108 <br><br> Portland, Maine <br> </p>
        </div>

        <div class='east-bayside'>
        <h3>East Bayside</h3><br>
        <p>3433 Phisherman's Avenue <br><br> (Northwest Corner) <br><br> Portland, Maine <br> </p>
        </div>

        <div class='oakdale'>
        <h3>Oakdale</h3><br>
        <p>515 Crescent Avenue <br><br> Second Floor <br><br> Portland, Maine <br> </p>
        </div>

    </div>

</div>



<!--Contact-->

<div class='contact'>
    <h2>The Tea Cozy</h2><br>
    <h5>contact@theteacozy.com</h5><br>
    <h5>917-555-9804</h5><br><br>
    <div class='copyright'>
        <h5>copyright The Tea Cozy 2017</h5>
</div>

  • {
    font-family: Helvetica;
    color: seashell;
    background-color: black;
    text-align: center;

    /reset of browser’s default values/
    margin: 0;
    padding: 0;
    }

html {
font-size: 22px;
}

/Header/

header {
width: 100%;
height: 69px;
border-bottom: 1px solid seashell;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
z-index: 2;
}

header img {
height: 50px;
margin-left: 10px;
}

header a {
margin: 10px;
}

a:hover{
opacity: 0.5;
}

/Our Mission/

#mission {
max-width: 1200px;
max-height: 700px;
margin: 0 auto;

}

#mission img {
width: 90%;
}

.mission-title{
position: absolute;
bottom: 50%;
width: 100%;
background-color: black;
margin: auto;
z-index: 1;
}

#mission h4 {
width: 80%;
margin: 0 auto;
}

/Tea of the month/

#tea {
position: relative;
top: 30px;

}

.tea-img {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

#tea img {
max-width: 300px;
max-height: 200px;
margin: 20px;
}

#locations {
position: relative;
top: 100px;
max-width: 1200px;
max-height: 700px;
width: 90%;
height: 100%;
margin: 20px auto;
background-image: url(“https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-locations-background.jpg”);
background-size: auto;
background-repeat: no-repeat;
padding: 20px 0;
}

#locations h2 {
background-color: transparent;
}

.adresses {
display: flex;
justify-content: center;
flex-wrap: wrap;
background-color: transparent;
}

.dowtown, .east-bayside, .oakdale {
margin: 15px 40px;
background-color: black;
padding: 10px;
}

.contact {
position: relative;
top: 120px;
}

.copyright {
float:left;
margin: 20px;
}

@media screen and (max-width: 700px) {

header {
 flex-wrap: wrap; 
 height: auto; 
 justify-content: center; 
}

.mission-title {
    bottom: 60%; 
}

}

@media screen and (max-width: 480px) {
* {
font-size: 96%;
}

.mission-title {
    bottom: 75%; 
}

#mission h4 {
    font-size: 13px; 
}

header img {
    height: 30px; 
}

}