Tea Cozy coding issues: Background image and flex-direction: row

This is the Tea Cozy assignment. I am having trouble getting the background images of the mission statement and locations to show up on my webpage. Also, I can’t get the tea images to line up in two rows. Please help, I feel like I’ve tried everything.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tea Cozy</title>
    <link href="resources/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
    <nav>
        <div class="header">
        <img src="resources/images/img-tea-cozy-logo.png"/>
        <ul>
            <li>Mission</li>
            <li>Featured Tea</li>
            <li>Location</li>
        </ul>
        </div> 
    </nav>
    <!--This is the main image with text of page-->
    <div id="mission" class="banner">
    <span>
    <img scr="resources/images/img-mission-background.jpg">
    <h2>Our Mission</h2>
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
    </span>
    </div>
    <!--Tea of the Month-->
        <h2>Tea of the Month</h2>
        <h4>What's Steeping at The Cozy</h4>
        <div class="tea month">
            <span>
        <div class="tea">
            <img src="resources/images/img-berryblitz.jpg"/>
            <div class="caption">
            <h4>Fall Berry Blitz Tea</h4></div>
        </div>
        <div class="tea">
            <img src="resources/images/img-spiced-rum.jpg"/> 
            <div class="caption">
            <h4>Spiced Rum Tea</h4></div>
        </div>
        <div class="tea">
            <img src="resources/images/img-donut.jpg"/>
            <div class="caption">
            <h4>Seasonal Donuts</h4></div>
        </div>
        <div class="tea">
            <img src="resources/images/img-myrtle-ave.jpg"/>
            <div class="caption">           
            <h4>Mrytle Ave Tea</h4></div> 
        </div>
        <div class="tea">
            <img src="resources/images/img-bedford-bizarre.jpg"/>
            <div class="caption">    
            <h4>Bedford Bizarre Tea</h4></div>
        </div>
        </span>
        </div>
     <!--Locations-->
     <img scr="/Users/kevinmunoz/Desktop/Tea Cozy/resources/images/img-locations-background.jpg"/>
     <h2>Locations</h2>
     <div class="locations">
         <span>
        <div class="downtown">
            <h3>Downtown</h3>
            <p>384 West 4th St <br><br><br>Suite 108 <br><br><br>Portland, Maine</p>
        </div>
        <div class="eastbayside">
            <h3>East Bayside</h3>
            <p>3433 Phisherman's Avenue <br> <br><br> (Northwest Corner) <br><br><br> Portland, Maine</p>
        </div>
        <div class="oakdale">
            <h3>Oakdale</h3>
            <p>515 Crescent Avenue <br><br><br> Second Floor <br><br><br> Portland, Maine</p>
        </div>
        </span>
    </div>
    <!--Footer-->
    <footer>
        <h2>The Tea Cozy</h2>
        <h5>contact@theteacozy</h5>
        <h5>917-555-8904</h5>
        <div class="copyright">
            <h5>copyright The Tea Cozy 2017</h5>
        </div>
    </footer>
</body>
</html>

/* header /
body {
font-family: “Helvetica”;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
width: 1500px;
}
.header {
display: inline-flex;
justify-content: space-between;
background-color: black;
height: 69px;
width: 100%;
border-bottom: 1px solid seashell;
}
.header img {
height: 50px;
width: auto;
margin: 10px;
display: inline-flex;
justify-content: flex-start;
}
.header ul {
display: inline-flex;
}
.header ul li {
text-decoration: underline;
margin-right: 40px;
display: inline-flex;
}
/
banner /
#mission img {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 700px;
width: 1200px;
position: absolute;
display: flex;
margin-bottom: 69px;
z-index: 10;
}
#mission .banner h4,
#mission .banner h2 {
background-color: black;
opacity: 0.9;
width: 1200px;
margin: 0 auto;
text-align: center;
align-items: center;
}
/
content /
.teamonth span {
margin-bottom: 69px;
flex-basis: 1000px;
display: inline-flex;
align-items: center;
align-content: center;
justify-content: center;
flex-direction: row;
}
.tea {
flex-wrap: wrap;
position: relative
}
.tea img {
height: 200px;
width: 300px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
flex-direction: row;
}
.caption {
flex-direction: column;
}
/
locations */
.locations img {
background-size: cover;
background-position: center;
z-index: 2;
}
.locations span {
display: flex;
background-image: url(“resources/images/img-locations-background.jpg”);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 500px;
width: 1200px;
display: inline-flex;
align-items: center;
align-content: center;
justify-content: center;
flex-flow: space-around;
}

.downtown,
.eastbayside,
.oakdale {
background-color: rgb(161, 41, 41);
width: 300px;
height: 300px;
margin-left: 20px;
margin-right: 20px;
justify-content: space-around;
}

/* footer*/
.copyright {
float: left;
}

You should check the path in developer tools that the url tries to access (you want to get the error message so you can see how far off your actual directory it is).

Here’s a link to a similar thread:

Thank you! I just fixed it.

do anybody have css source code related to this product… if have please share.

Thanks in advance,
Akhilesh