Hero-image positioning in Tea Cozy Project gone wrong - Can anyone help?

Hello fellow coders!

I’ve been trying to figure out how to position the hero image of the Tea Cozy Project for the last three hours and somehow I still run into the same issue, can anyone tell me what’s going wrong here?

(-> This is the project I’m talking about)

The hero image somehow keeps covering up my header instead of lining up AFTER the header. What am I doing wrong?

Thanks a lot and have a great day!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"/>
    <title>Tea Cozy</title>
</head>


<body>

<!--Header-->
<header class="header">
    <div class="logo">
        <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="tea cozy logo"></a>
    </div>
    <nav class="navigation">
        <a href="#the-mission">Mission</a>
        <a href="#the-tea">Featured Teas</a>
        <a href="#the-places">Locations</a>
    </nav>
</div>

<!--Hero-Section-->
<section class="hero" id="#the-mission">
    <div class="hero-img">
    </div>
    <div class="mission-statement">
        <h2>Our Mission</h2>
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
    </div>
</section>

</body>
</html>

And my CSS:

/* Browser reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/*Global styles */
html {
    font-size: 22px;
    line-height: normal;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background-color: black;
    color: seashell;
    opacity: 0.9;
    text-align: center;
}

/* Font styles*/

    a {
        color: seashell;
        text-transform: uppercase;
    }

/* Header styles */
.header {
    display: flex;
    height: 69px;
    width: 100%;
    border-bottom: 1px solid seashell;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
   
}

.logo {
    display: inline-flex;
    flex-direction: row;
    height: 50px;
    padding: 0 10px;
    overflow: hidden;
    height: 50px;
    
}

.navigation a {
    display: inline-flex;
    padding-right: 25px
}

.navigation a:hover {
    color: pink;
}


 /* responsive header */
 @media (max-width: 681px) {
    .header {
        flex-direction: column;
        border-bottom: none;
    }
    .navigation a {
        padding-top: 0.5em;
    }
    
    html {
        font-size: 18px;
    }

    .logo {
        flex-shrink: 0;
    }
}


/* responsive header */
.hero {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    width: 1200px;
    height: 700px;  
}

.hero-img {
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
    width: 1200px;
    height: 700px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.mission-statement {
    width: 100%;
}

Hi there!

You’re assigning your header a fixed height of 69px…

…and the hero image is nested inside it.

    <header class="header">
        <div class="logo">
            <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png"
                alt="tea cozy logo"></a>
        </div>
        <nav class="navigation">
            <a href="#the-mission">Mission</a>
            <a href="#the-tea">Featured Teas</a>
            <a href="#the-places">Locations</a>
        </nav>
        <!-- </div> -->

        <!--Hero-Section-->
        <section class="hero" id="#the-mission">
            <div class="hero-img">

Now, that won’t fix it all, but should give you a head start (also, as a side note, take a look at the closing HTML tags, you’ll find a couple that don’t go there).

1 Like

Thank you so much that helps a lot!
Now that you mention it, these closings are a mess :see_no_evil:
Will now go back to it and try fix the rest…

1 Like