I don’t understand why the images in my totm(tea of the month) section are so massive. I downloaded them and saved them to a local directory. Tried using the URL links. I’ve tried adding a height and max-heigh, width and max-width. Nothing I do seems to change the size of them. Any ideas?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tea Cozy</title>
<link rel="stylesheet" type="text/css" href="resources/css/index.css">
</head>
<body>
<header>
<img src="resources/images/img-tea-cozy-logo-2.png" alt="Cozy Tea Logo">
<nav>
<ul></ul>
<li><a href="#mission">Mission</a></li>
<li><a href="#featured_tea">Featured Teas</a></li>
<li><a href="#location">Location</a></li>
</ul>
</nav>
</header>
<main>
<section class="mission">
<div id="mission-text">
<h2>Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</section>
<section class="totm">
<h2>Tea of the month</h2>
<h4>What's steeping at The Tea Cozy?</h4>
<div class="totm-image"><img src="/resources/images/img-berryblitz.jpeg"><p>Fall Berry Blitz Tea</p> </div>
<div class="totm-image"><img src="/resources/images/img-spiced-rum.jpeg"><p>Spiced Rum Tea</p></div>
<div class="totm-image"><img src="/resources/images/img-donut.jpeg"><p>Seasonal Donuts</p></div>
<div class="totm-image"><img src="/resources/images/img-myrtle-ave.jpeg"><p>Myrtle Ave Tea</p></div>
<div class="totm-image"><img src="/resources/images/img-bedford-bizarre.jpeg"><p>Bedford Bizarre Tea</p></div>
</section>
</main>
</body>
</html>
* {
font-family: Helvetica;
color: seashell;
background-color: black;
text-align: center;
/*reset of browser's default values*/
margin: 0;
padding: 0;
opacity: .9;
}
header {
border-bottom: 1px solid seashell;
justify-content: space-between;
align-items: center;
display: flex;
width: 100%;
}
header img {
height: 50px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 10px;
}
header li {
list-style: none;
display: inline-block;
text-decoration: none;
color: seashell;
padding-right: 1em;
}
.mission {
background-image: url(/resources/images/img-mission-background.jpeg);
margin: 0 auto;
display: flex;
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
width: 80%;
background-repeat: no-repeat;
background-position: center;
height: 700px;
justify-content: center;
}
#mission-text {
margin: auto;
background-color: black;
width: 100%;
padding: 10px 30px;
}
.totm {
width: 1000px;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-content: center;
}
.totm-image {
max-width: 300px;
display: inline-block;
height: 200px;
}