Tea Cozy project feedback

Projects
1

Hi everyone!
I (finally) just got done with the Tea Cozy project, and man was it difficult. I would appreciate any feedback on the code. I know that it is absolutely not perfect. My main question(s) are:

  • My images don’t match the same width as the image in the reference, yet i used the same width and height dimensions

  • In the Locations section toward the bottom of the page, I couldn’t seem to figure out how to make the image match up exactly. It seems like my image cuts off much before the image on the reference does, and i have the same length and width for the image on that section.

Thanks in advance!

Also, here is a link to the github page for the project:
GitHub: GitHub - Vital6P/TeaCozy
Live Page: Document

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style/style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <img src="imgs/img-tea-cozy-logo.webp" alt="">
        <nav>
            <a href="#missionContainer">Mission</a>
            <a href="#teaMain">Featured Tea</a>
            <a href="#">Locations</a>
        </nav>
    </header>

    <div class="missionContainer" id="missionContainer">
        <div class="missionText">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>

    <h2>Tea of the Month</h2>
    <h4>What's Steeping at The Tea Fancy?</h4>

    <div class="teaMain" id="teaMain">
        <div class="teaContainer">
            <img src="imgs/img-berryblitz.webp" alt="">
            <h4>Fall Berry Blitz</h4>
        </div>
        <div class="teaContainer">
            <img src="imgs/img-spiced-rum.webp" alt="">
            <h4>Spiced Rum Tea</h4>
        </div>
        <div class="teaContainer">
            <img src="imgs/img-donut.webp" alt="">
            <h4>Seasonal Donut</h4>
        </div>
        <div class="teaContainer">
            <img src="imgs/img-myrtle-ave.webp" alt="">
            <h4>Myrtle Ave Tea</h4>
        </div>
        <div class="teaContainer">
            <img src="imgs/img-bedford-bizarre.jpg" alt="">
            <h4>Bedford Bizzare Tea</h4>
        </div>
    </div>

    <div class="locationMain">
        <h2>Locations</h2>
        <div class="locationContainers">
            <div class="locationContainer">
                <h3>Downtown</h3>
                <p>384 West 4th St</p>
                <p>Suite 108</p>
                <p>Portland, Maine</p>
            </div>
            <div class="locationContainer">
                <h3>East Bayside</h3>
                <p>3433 Phisterman's Avenue</p>
                <p>(Northwest Corner)</p>
                <p>Portland, Maine</p>
            </div>
            <div class="locationContainer">
                <h3>Oakdale</h3>
                <p>515 Crescent Avenue</p>
                <p>Second Floor</p>
                <p>Portland, Maine</p>
            </div>
        </div>
    </div>

    <div class="Contact">
        <h1>The Tea Cozy</h1>
        <h5>[email protected]</h5>
        <h5>917-555-8904</h5>
    </div>

    <div class="teaFooter">
        <h5>copyright The Tea Cozy 2017</h5>
    </div>
</body>
</html>

CSS:

body {
    display: flex;
    flex-direction: column;
    font-family: Helvetica;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.5;
    align-items: center;
    margin: 0;
}

header {
    display: flex;
    border-bottom: 1px solid seashell;
    width: 100%;
    height: 69px;
    position: fixed;
    background-color: black;
    z-index: 99;
}

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

nav{
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

nav a {
    text-decoration: none;
    color: white;
    margin: 10px;
    font-weight: 700;
}

/*Our Mission*/
.missionContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 70px;
    background-image: url(../imgs/img-mission-background.webp);
    height: 700px;
    width: 1200px;
    margin-bottom: 50px;
}

.missionContainer .missionText {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: black;
}

.missionContainer h2, h4 {
    margin: 10px;
}

/*Tea of the Month*/

.teaMain {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1000px;
    margin-bottom: 60px;
}

.teaContainer img {
    display: flex;
    width: 300px;
    height: 200px;
}

.teaContainer h4 {
    margin: 10px;
}

.teaContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
}

/*Tea Locations*/

.locationMain {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url(../imgs/img-locations-background.webp);
    width: 1200px;
    height: 500px;
}

.locationMain .locationContainers {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.locationContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 300x;
    width: 300px;
    background-color: black;
    margin: 0 20px;
    font-weight: 700;
}

.Contact h1 {
    margin-top: 10px;
}

.Contact {
    text-align: center;
    height: 200px;
}

.teaFooter {
    font-weight: 700;
    float: left;
    width: 100%;
}

.teaFooter h5 {
    margin-left: 20px;
}
2

your work great,
Because the img is square but the outside element is rectangle so just adjust as you need, using the size and position.
you can change the background img position use :
.locationMain {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url(…/imgs/img-locations-background.webp);
background-size: cover;
background-position: 0 50%; /* Adjust as needed */
width: 1200px;
height: 500px;
}