Two small things on Tea Cozy Project

Hello Hello!

I’m feeling pretty good about my Tea Cozy project, but I’ve got two pieces that I’m a bit stumped on:

  1. Why does my header not go all the way to the top? When I scroll down there is area on top that reveals the rest of the page content.
  2. At a certain width my whole layout goes odd for a moment. My “flex-container” container impedes on my “shop-container” container. See image.

Thanks for any help and/or feedback on anything else you may notice.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="./resources/style.css">
        <title>Tea Cozy</title>
    </head>

    <body>
        <header class="header">
            <img class="logo" src="./resources/images/img-tea-cozy-logo.png">
            <nav class="selections">
                <a href="#mission">Mission</a>
                <a href="#featured">Featured Tea</a>
                <a href="#locations">Locations</a>
            </nav>
        </header>
        <div id="mission" class="mission">
            <div class="mission-text">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
        <div id="featured" class="featured">
            <div class="featuredPre">
                <h2>Tea of the Month</h2>
                <h4>What's Steeping at the Tea Cozy</h4>
            </div>
            <div class="flex-container">
                <div class="item">
                    <img src="./resources/images/img-berryblitz.jpg">
                    <h4>Fall Berry Blitz Tea</h4>
                </div>
                <div class="item">
                    <img src="./resources/images/img-spiced-rum.jpg">
                    <h4>Spiced Rum Tea</h4>
                </div>
                <div class="item">
                    <img src="./resources/images/img-donut.jpg">
                    <h4>Seasonal Donuts</h4>
                </div>
                <div class="item">
                    <img src="./resources/images/img-myrtle-ave.jpg">
                    <h4>Myrtle Ave Tea</h4>
                </div>
                <div class="item">
                    <img src="./resources/images/img-bedford-bizarre.jpg">
                    <h4>Bedford Bizarre tea</h4>
                </div>
                <break></break>
            <div id="locations" class="locations">
                <h2>Locations</h2>
                <break></break>
                <div class="shop-container">
                    <div class="shop">
                        <h2>Downtown</h2>
                        <h4>384 West 4th St</h4>
                        <h4>Suite 108</h4>
                        <h4>Portland, Maine</h4>
                    </div>
                    <div class="shop">
                        <h2>East Bayside</h2>
                        <h4>3433 Phisherman's Avenue</h4>
                        <h4>(Northwest Corner)</h4>
                        <h4>Portland, Maine</Main></h4> 
                    </div>
                    <div class="shop">
                        <h2>Oakdale</h2>
                        <h4>515 Crescent Avenue</h4>
                        <h4>Second Floor</h4>
                        <h4>Portland, Maine</h4>
                    </div>
                </div>
            </div>
            </div>
        </div>
        <div class="Contact Info">
            <h2>The Tea Cozy</h2>
            <h4>contact@theteacozy.com</h4>
            <h4>917-555-8904</h4>
        </div>
        <footer>
            <h5>copywright The Tea Cozy 2017</h5>
        </footer>
    </body>
</html>
html {
    font-family: Helvetica;
    font-size: 20px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center;
    align-content: center;
}
.header {
    display: flex;
    height: 69px;
    width: 100%;
    border-bottom: 1px solid seashell;
    position: fixed;
    background: black;
    z-index: 10;

}

.header img {
    justify-content: center;
    margin: 10px auto;
}

.header nav {
    padding: 30px auto;
    margin-top: 20px;
}


a {
    align-content: center;
    text-decoration: underline;
    border-right: 10px;
    margin: 10px;
    padding: 10px;
    margin-top: 20px;
    color: white;
}

.logo {
    height: 50px;
}
nav {
    text-align: right;
    flex-grow: 1;
}

h2 {
    font-weight: bold;
}

h4 {
    font-size: 0.7rem;
}

h5 {
    font-size: 0.5rem;
}

.mission { 
    background-image: url("./images/img-mission-background.jpg");
    height: 700px;
    display: flex;
    align-items: center;
}

.mission-text {
    background: black;
    display: inline-flexbox;
    width: 100%;
}

featured {
    max-width: 1000px;
}

.flex-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    width: 100%;
}

.flex-container h4 {
    line-height: 10px;
}

.item img {
    height: 200px;
    display: block;
    padding: 10px;
}

.locations {
    /* display: flex; */
    flex-wrap: wrap;
    background-image: url(./images/img-locations-background.jpg);
    height: 500px;
}

.shop-container {
    display: flex;
    align-content: center;;
    justify-content: center;
    flex-direction: row;
}

.shop {
    background: black;
    width: 300px;
    margin-right: 40px;
    margin-left: 40px;
}

footer {
    text-align: left;
}

  1. has to do with your body having a default margin. Add the following attribute to your body
margin: 0;
  1. Your <div class="flex-container"> has no closing tag so your <div id="locations" class="locations"> becomes part of the flex container.

Happy coding!

This topic was automatically closed 18 hours after the last reply. New replies are no longer allowed.